From a494a61e9239f086fea9c68d989b57e48115204a Mon Sep 17 00:00:00 2001
From: J-michalek <jaku.michalek@gmail.com>
Date: Sun, 20 Jul 2025 15:27:11 +0200
Subject: [PATCH 1/4] feat(Calendar): display week numbers

---
 playground/app/pages/components/calendar.vue  |   6 +-
 src/runtime/components/Calendar.vue           |  34 +-
 src/theme/calendar.ts                         |  19 +-
 test/components/Calendar.spec.ts              |   1 +
 .../__snapshots__/Calendar-vue.spec.ts.snap   | 401 ++++++++++++++++++
 .../__snapshots__/Calendar.spec.ts.snap       | 401 ++++++++++++++++++
 6 files changed, 856 insertions(+), 6 deletions(-)

diff --git a/playground/app/pages/components/calendar.vue b/playground/app/pages/components/calendar.vue
index fc21882cfe..4a44cafa3c 100644
--- a/playground/app/pages/components/calendar.vue
+++ b/playground/app/pages/components/calendar.vue
@@ -12,13 +12,13 @@ const rangeValue = shallowRef({
 <template>
   <div class="flex gap-4">
     <div class="flex justify-center gap-2">
-      <UCalendar v-model="singleValue" />
+      <UCalendar v-model="singleValue" week-numbers />
     </div>
     <div class="flex justify-center gap-2">
-      <UCalendar v-model="multipleValue" multiple />
+      <UCalendar v-model="multipleValue" multiple week-numbers />
     </div>
     <div class="flex justify-center gap-2">
-      <UCalendar v-model="rangeValue" range />
+      <UCalendar v-model="rangeValue" range week-numbers />
     </div>
   </div>
 </template>
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index ec2b15185e..0d9fce147c 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -1,11 +1,33 @@
 <script lang="ts">
 import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootProps, RangeCalendarRootEmits, DateRange, CalendarCellTriggerProps } from 'reka-ui'
-import type { DateValue } from '@internationalized/date'
+import { getDaysBetween } from 'reka-ui/date'
+import { CalendarDate, getDayOfWeek } from '@internationalized/date'
+import type { DateValue, DayOfWeek } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/calendar'
 import type { ButtonProps } from '../types'
 import type { ComponentConfig } from '../types/utils'
 
+// TODO: Remove this and use the function that reka-ui provides - not released yet.
+export function getWeekNumber(date: DateValue, locale: string = 'en-US', firstDayOfWeek?: DayOfWeek): number {
+  const firstDayOfYear = new CalendarDate(date.year, 1, 1)
+
+  const firstDayOfYearWeekday = getDayOfWeek(firstDayOfYear, locale, firstDayOfWeek)
+
+  const firstWeekStart = firstDayOfYear.subtract({ days: firstDayOfYearWeekday })
+
+  // If date is before the first week start It belongs to the last week of the previous year
+  if (date.compare(firstWeekStart) < 0) {
+    const prevYearDate = new CalendarDate(date.year - 1, 12, 31)
+    return getWeekNumber(prevYearDate, locale, firstDayOfWeek)
+  }
+
+  const days = getDaysBetween(firstWeekStart, date)
+
+  // Week number is days divided by 7 plus 1
+  return Math.floor(days.length / 7) + 1
+}
+
 type Calendar = ComponentConfig<typeof theme, AppConfig, 'calendar'>
 
 type CalendarDefaultValue<R extends boolean = false, M extends boolean = false> = R extends true
@@ -90,6 +112,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
   yearControls?: boolean
   defaultValue?: CalendarDefaultValue<R, M>
   modelValue?: CalendarModelValue<R, M>
+  weekNumbers?: boolean
   class?: any
   ui?: Calendar['slots']
 }
@@ -135,7 +158,8 @@ const prevMonthIcon = computed(() => props.prevMonthIcon || (dir.value === 'rtl'
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })({
   color: props.color,
-  size: props.size
+  size: props.size,
+  weekNumbers: props.weekNumbers
 }))
 
 function paginateYear(date: DateValue, sign: -1 | 1) {
@@ -186,6 +210,9 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
       >
         <Calendar.GridHead>
           <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
+            <th v-if="weekNumbers" :aria-label="t('calendar.week')" :class="ui.headCellWeek({ class: props.ui?.headCellWeek })">
+              {{ t('calendar.weekShort') }}
+            </th>
             <Calendar.HeadCell
               v-for="day in weekDays"
               :key="day"
@@ -203,6 +230,9 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
             :key="`weekDate-${index}`"
             :class="ui.gridRow({ class: props.ui?.gridRow })"
           >
+            <td v-if="weekNumbers && weekDates[0]" role="gridcell" :class="ui.cellWeek({ class: props.ui?.cellWeek })">
+              {{ getWeekNumber(weekDates[0], locale) }}
+            </td>
             <Calendar.Cell
               v-for="weekDate in weekDates"
               :key="weekDate.toString()"
diff --git a/src/theme/calendar.ts b/src/theme/calendar.ts
index 4b192c1be1..f9a7b4e747 100644
--- a/src/theme/calendar.ts
+++ b/src/theme/calendar.ts
@@ -11,8 +11,10 @@ export default (options: Required<ModuleOptions>) => ({
     gridWeekDaysRow: 'mb-1 grid w-full grid-cols-7',
     gridBody: 'grid',
     headCell: 'rounded-md',
+    headCellWeek: 'rounded-md text-muted',
     cell: 'relative text-center',
-    cellTrigger: ['m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted', options.theme.transitions && 'transition']
+    cellTrigger: ['m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted', options.theme.transitions && 'transition'],
+    cellWeek: 'relative text-center text-muted'
   },
   variants: {
     color: {
@@ -29,32 +31,47 @@ export default (options: Required<ModuleOptions>) => ({
       xs: {
         heading: 'text-xs',
         cell: 'text-xs',
+        cellWeek: 'text-xs',
         headCell: 'text-[10px]',
+        headCellWeek: 'text-[10px]',
         cellTrigger: 'size-7',
         body: 'space-y-2 pt-2'
       },
       sm: {
         heading: 'text-xs',
         headCell: 'text-xs',
+        headCellWeek: 'text-xs',
+        cellWeek: 'text-xs',
         cell: 'text-xs',
         cellTrigger: 'size-7'
       },
       md: {
         heading: 'text-sm',
         headCell: 'text-xs',
+        headCellWeek: 'text-xs',
+        cellWeek: 'text-xs',
         cell: 'text-sm',
         cellTrigger: 'size-8'
       },
       lg: {
         heading: 'text-md',
         headCell: 'text-md',
+        headCellWeek: 'text-md',
         cellTrigger: 'size-9 text-md'
       },
       xl: {
         heading: 'text-lg',
         headCell: 'text-lg',
+        headCellWeek: 'text-lg',
         cellTrigger: 'size-10 text-lg'
       }
+    },
+    weekNumbers: {
+      true: {
+        gridRow: 'grid-cols-8',
+        gridWeekDaysRow: 'grid-cols-8'
+
+      }
     }
   },
   defaultVariants: {
diff --git a/test/components/Calendar.spec.ts b/test/components/Calendar.spec.ts
index 699336871c..bd52b75b95 100644
--- a/test/components/Calendar.spec.ts
+++ b/test/components/Calendar.spec.ts
@@ -36,6 +36,7 @@ describe('Calendar', () => {
     ['without fixedWeeks', { props: { fixedWeeks: false } }],
     ['without monthControls', { props: { monthControls: false } }],
     ['without yearControls', { props: { yearControls: false } }],
+    ['without weekNumbers', { props: { weekNumbers: true } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
     ['with color neutral', { props: { color: 'neutral' } }],
     ['with as', { props: { as: 'section' } }],
diff --git a/test/components/__snapshots__/Calendar-vue.spec.ts.snap b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
index 3059b337ac..493248ac3f 100644
--- a/test/components/__snapshots__/Calendar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
@@ -21,6 +21,7 @@ exports[`Calendar > renders with as correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -32,6 +33,7 @@ exports[`Calendar > renders with as correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -55,6 +57,7 @@ exports[`Calendar > renders with as correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -78,6 +81,7 @@ exports[`Calendar > renders with as correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -101,6 +105,7 @@ exports[`Calendar > renders with as correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -124,6 +129,7 @@ exports[`Calendar > renders with as correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -147,6 +153,7 @@ exports[`Calendar > renders with as correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -199,6 +206,7 @@ exports[`Calendar > renders with class correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -210,6 +218,7 @@ exports[`Calendar > renders with class correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -233,6 +242,7 @@ exports[`Calendar > renders with class correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -256,6 +266,7 @@ exports[`Calendar > renders with class correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -279,6 +290,7 @@ exports[`Calendar > renders with class correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -302,6 +314,7 @@ exports[`Calendar > renders with class correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -325,6 +338,7 @@ exports[`Calendar > renders with class correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -377,6 +391,7 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -388,6 +403,7 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10 size-8">29</div>
           </td>
@@ -411,6 +427,7 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10 size-8">5</div>
           </td>
@@ -434,6 +451,7 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10 size-8">12</div>
           </td>
@@ -457,6 +475,7 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10 size-8">19</div>
           </td>
@@ -480,6 +499,7 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10 size-8">26</div>
           </td>
@@ -503,6 +523,7 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10 size-8">2</div>
           </td>
@@ -555,6 +576,7 @@ exports[`Calendar > renders with day slot correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -566,6 +588,7 @@ exports[`Calendar > renders with day slot correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -589,6 +612,7 @@ exports[`Calendar > renders with day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -612,6 +636,7 @@ exports[`Calendar > renders with day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -635,6 +660,7 @@ exports[`Calendar > renders with day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -658,6 +684,7 @@ exports[`Calendar > renders with day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -681,6 +708,7 @@ exports[`Calendar > renders with day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -733,6 +761,7 @@ exports[`Calendar > renders with default value correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -744,6 +773,7 @@ exports[`Calendar > renders with default value correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -767,6 +797,7 @@ exports[`Calendar > renders with default value correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -790,6 +821,7 @@ exports[`Calendar > renders with default value correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -813,6 +845,7 @@ exports[`Calendar > renders with default value correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -836,6 +869,7 @@ exports[`Calendar > renders with default value correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -859,6 +893,7 @@ exports[`Calendar > renders with default value correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -911,6 +946,7 @@ exports[`Calendar > renders with disabled correctly 1`] = `
     <table tabindex="-1" role="grid" aria-disabled="true" data-disabled="" 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">
+          <!--v-if-->
           <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>
@@ -922,6 +958,7 @@ exports[`Calendar > renders with disabled correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -945,6 +982,7 @@ exports[`Calendar > renders with disabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -968,6 +1006,7 @@ exports[`Calendar > renders with disabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -991,6 +1030,7 @@ exports[`Calendar > renders with disabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -1014,6 +1054,7 @@ exports[`Calendar > renders with disabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -1037,6 +1078,7 @@ exports[`Calendar > renders with disabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -1089,6 +1131,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -1100,6 +1143,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -1123,6 +1167,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -1146,6 +1191,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -1169,6 +1215,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -1192,6 +1239,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -1215,6 +1263,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -1267,6 +1316,7 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -1278,6 +1328,7 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -1301,6 +1352,7 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -1324,6 +1376,7 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -1347,6 +1400,7 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -1370,6 +1424,7 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -1393,6 +1448,7 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -1445,6 +1501,7 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -1456,6 +1513,7 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -1479,6 +1537,7 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -1502,6 +1561,7 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -1525,6 +1585,7 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -1548,6 +1609,7 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -1571,6 +1633,7 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -1623,6 +1686,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -1634,6 +1698,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -1657,6 +1722,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -1680,6 +1746,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -1703,6 +1770,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -1726,6 +1794,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -1749,6 +1818,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -1801,6 +1871,7 @@ exports[`Calendar > renders with multiple correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -1812,6 +1883,7 @@ exports[`Calendar > renders with multiple correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -1835,6 +1907,7 @@ exports[`Calendar > renders with multiple correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -1858,6 +1931,7 @@ exports[`Calendar > renders with multiple correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -1881,6 +1955,7 @@ exports[`Calendar > renders with multiple correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -1904,6 +1979,7 @@ exports[`Calendar > renders with multiple correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -1927,6 +2003,7 @@ exports[`Calendar > renders with multiple correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -1979,6 +2056,7 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -1990,6 +2068,7 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -2013,6 +2092,7 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -2036,6 +2116,7 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -2059,6 +2140,7 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -2082,6 +2164,7 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -2105,6 +2188,7 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -2157,6 +2241,7 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -2168,6 +2253,7 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -2191,6 +2277,7 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -2214,6 +2301,7 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -2237,6 +2325,7 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -2260,6 +2349,7 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -2283,6 +2373,7 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -2335,6 +2426,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -2346,6 +2438,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -2369,6 +2462,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -2392,6 +2486,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -2415,6 +2510,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -2438,6 +2534,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -2461,6 +2558,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -2488,6 +2586,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -2499,6 +2598,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -2522,6 +2622,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -2545,6 +2646,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">9</div>
           </td>
@@ -2568,6 +2670,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">16</div>
           </td>
@@ -2591,6 +2694,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">23</div>
           </td>
@@ -2614,6 +2718,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -2666,6 +2771,7 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -2677,6 +2783,7 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -2700,6 +2807,7 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -2723,6 +2831,7 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -2746,6 +2855,7 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -2769,6 +2879,7 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -2792,6 +2903,7 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -2844,6 +2956,7 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -2855,6 +2968,7 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -2878,6 +2992,7 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -2901,6 +3016,7 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -2924,6 +3040,7 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -2947,6 +3064,7 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -2970,6 +3088,7 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -3025,6 +3144,7 @@ exports[`Calendar > renders with range correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -3036,6 +3156,7 @@ exports[`Calendar > renders with range correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -3059,6 +3180,7 @@ exports[`Calendar > renders with range correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -3082,6 +3204,7 @@ exports[`Calendar > renders with range correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -3105,6 +3228,7 @@ exports[`Calendar > renders with range correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -3128,6 +3252,7 @@ exports[`Calendar > renders with range correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -3151,6 +3276,7 @@ exports[`Calendar > renders with range correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -3200,6 +3326,7 @@ exports[`Calendar > renders with readonly correctly 1`] = `
     <table tabindex="-1" role="grid" aria-readonly="true" data-readonly="" 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">
+          <!--v-if-->
           <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>
@@ -3211,6 +3338,7 @@ exports[`Calendar > renders with readonly correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -3234,6 +3362,7 @@ exports[`Calendar > renders with readonly correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -3257,6 +3386,7 @@ exports[`Calendar > renders with readonly correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -3280,6 +3410,7 @@ exports[`Calendar > renders with readonly correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -3303,6 +3434,7 @@ exports[`Calendar > renders with readonly correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -3326,6 +3458,7 @@ exports[`Calendar > renders with readonly correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -3378,6 +3511,7 @@ exports[`Calendar > renders with size lg correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -3389,6 +3523,7 @@ exports[`Calendar > renders with size lg correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-9 text-md">29</div>
           </td>
@@ -3412,6 +3547,7 @@ exports[`Calendar > renders with size lg correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-9 text-md">5</div>
           </td>
@@ -3435,6 +3571,7 @@ exports[`Calendar > renders with size lg correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-9 text-md">12</div>
           </td>
@@ -3458,6 +3595,7 @@ exports[`Calendar > renders with size lg correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-9 text-md">19</div>
           </td>
@@ -3481,6 +3619,7 @@ exports[`Calendar > renders with size lg correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-9 text-md">26</div>
           </td>
@@ -3504,6 +3643,7 @@ exports[`Calendar > renders with size lg correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-9 text-md">2</div>
           </td>
@@ -3556,6 +3696,7 @@ exports[`Calendar > renders with size md correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -3567,6 +3708,7 @@ exports[`Calendar > renders with size md correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -3590,6 +3732,7 @@ exports[`Calendar > renders with size md correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -3613,6 +3756,7 @@ exports[`Calendar > renders with size md correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -3636,6 +3780,7 @@ exports[`Calendar > renders with size md correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -3659,6 +3804,7 @@ exports[`Calendar > renders with size md correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -3682,6 +3828,7 @@ exports[`Calendar > renders with size md correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -3734,6 +3881,7 @@ exports[`Calendar > renders with size sm correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -3745,6 +3893,7 @@ exports[`Calendar > renders with size sm correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">29</div>
           </td>
@@ -3768,6 +3917,7 @@ exports[`Calendar > renders with size sm correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">5</div>
           </td>
@@ -3791,6 +3941,7 @@ exports[`Calendar > renders with size sm correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">12</div>
           </td>
@@ -3814,6 +3965,7 @@ exports[`Calendar > renders with size sm correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">19</div>
           </td>
@@ -3837,6 +3989,7 @@ exports[`Calendar > renders with size sm correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">26</div>
           </td>
@@ -3860,6 +4013,7 @@ exports[`Calendar > renders with size sm correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">2</div>
           </td>
@@ -3912,6 +4066,7 @@ exports[`Calendar > renders with size xl correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -3923,6 +4078,7 @@ exports[`Calendar > renders with size xl correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-10 text-lg">29</div>
           </td>
@@ -3946,6 +4102,7 @@ exports[`Calendar > renders with size xl correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-10 text-lg">5</div>
           </td>
@@ -3969,6 +4126,7 @@ exports[`Calendar > renders with size xl correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-10 text-lg">12</div>
           </td>
@@ -3992,6 +4150,7 @@ exports[`Calendar > renders with size xl correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-10 text-lg">19</div>
           </td>
@@ -4015,6 +4174,7 @@ exports[`Calendar > renders with size xl correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-10 text-lg">26</div>
           </td>
@@ -4038,6 +4198,7 @@ exports[`Calendar > renders with size xl correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-10 text-lg">2</div>
           </td>
@@ -4090,6 +4251,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -4101,6 +4263,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">29</div>
           </td>
@@ -4124,6 +4287,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">5</div>
           </td>
@@ -4147,6 +4311,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">12</div>
           </td>
@@ -4170,6 +4335,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">19</div>
           </td>
@@ -4193,6 +4359,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">26</div>
           </td>
@@ -4216,6 +4383,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">2</div>
           </td>
@@ -4268,6 +4436,7 @@ exports[`Calendar > renders with ui correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -4279,6 +4448,7 @@ exports[`Calendar > renders with ui correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -4302,6 +4472,7 @@ exports[`Calendar > renders with ui correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -4325,6 +4496,7 @@ exports[`Calendar > renders with ui correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -4348,6 +4520,7 @@ exports[`Calendar > renders with ui correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -4371,6 +4544,7 @@ exports[`Calendar > renders with ui correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -4394,6 +4568,7 @@ exports[`Calendar > renders with ui correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -4446,6 +4621,7 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -4457,6 +4633,7 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -4480,6 +4657,7 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -4503,6 +4681,7 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -4526,6 +4705,7 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -4549,6 +4729,7 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -4572,6 +4753,7 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -4624,6 +4806,7 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -4635,6 +4818,7 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">30</div>
           </td>
@@ -4658,6 +4842,7 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">6</div>
           </td>
@@ -4681,6 +4866,7 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">13</div>
           </td>
@@ -4704,6 +4890,7 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">20</div>
           </td>
@@ -4727,6 +4914,7 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">27</div>
           </td>
@@ -4750,6 +4938,7 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">3</div>
           </td>
@@ -4802,6 +4991,7 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -4813,6 +5003,7 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -4836,6 +5027,7 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -4859,6 +5051,7 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -4882,6 +5075,7 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -4905,6 +5099,7 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -4928,6 +5123,7 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -4980,6 +5176,7 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -4991,6 +5188,7 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -5014,6 +5212,7 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -5037,6 +5236,7 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -5060,6 +5260,7 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -5083,6 +5284,7 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -5131,6 +5333,7 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -5142,6 +5345,7 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -5165,6 +5369,7 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -5188,6 +5393,7 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -5211,6 +5417,7 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -5234,6 +5441,7 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -5257,6 +5465,192 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
+          <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <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>"
+`;
+
+exports[`Calendar > renders without weekNumbers correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" weeknumbers="true">
+  <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>
+      <!--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>
+      <!--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>
+      <!--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>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-8">
+          <th aria-label="week" class="rounded-md text-muted text-xs">wk</th>
+          <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>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">52</td>
+          <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">1</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">2</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">3</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">4</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">5</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -5305,6 +5699,7 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -5316,6 +5711,7 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -5339,6 +5735,7 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -5362,6 +5759,7 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -5385,6 +5783,7 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -5408,6 +5807,7 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -5431,6 +5831,7 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
diff --git a/test/components/__snapshots__/Calendar.spec.ts.snap b/test/components/__snapshots__/Calendar.spec.ts.snap
index 478bc91460..48afc19e56 100644
--- a/test/components/__snapshots__/Calendar.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar.spec.ts.snap
@@ -21,6 +21,7 @@ exports[`Calendar > renders with as correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -32,6 +33,7 @@ exports[`Calendar > renders with as correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -55,6 +57,7 @@ exports[`Calendar > renders with as correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -78,6 +81,7 @@ exports[`Calendar > renders with as correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -101,6 +105,7 @@ exports[`Calendar > renders with as correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -124,6 +129,7 @@ exports[`Calendar > renders with as correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -147,6 +153,7 @@ exports[`Calendar > renders with as correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -199,6 +206,7 @@ exports[`Calendar > renders with class correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -210,6 +218,7 @@ exports[`Calendar > renders with class correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -233,6 +242,7 @@ exports[`Calendar > renders with class correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -256,6 +266,7 @@ exports[`Calendar > renders with class correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -279,6 +290,7 @@ exports[`Calendar > renders with class correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -302,6 +314,7 @@ exports[`Calendar > renders with class correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -325,6 +338,7 @@ exports[`Calendar > renders with class correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -377,6 +391,7 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -388,6 +403,7 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10 size-8">29</div>
           </td>
@@ -411,6 +427,7 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10 size-8">5</div>
           </td>
@@ -434,6 +451,7 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10 size-8">12</div>
           </td>
@@ -457,6 +475,7 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10 size-8">19</div>
           </td>
@@ -480,6 +499,7 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10 size-8">26</div>
           </td>
@@ -503,6 +523,7 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted data-[selected]:bg-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10 size-8">2</div>
           </td>
@@ -555,6 +576,7 @@ exports[`Calendar > renders with day slot correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -566,6 +588,7 @@ exports[`Calendar > renders with day slot correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -589,6 +612,7 @@ exports[`Calendar > renders with day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -612,6 +636,7 @@ exports[`Calendar > renders with day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -635,6 +660,7 @@ exports[`Calendar > renders with day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -658,6 +684,7 @@ exports[`Calendar > renders with day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -681,6 +708,7 @@ exports[`Calendar > renders with day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -733,6 +761,7 @@ exports[`Calendar > renders with default value correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -744,6 +773,7 @@ exports[`Calendar > renders with default value correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -767,6 +797,7 @@ exports[`Calendar > renders with default value correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -790,6 +821,7 @@ exports[`Calendar > renders with default value correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -813,6 +845,7 @@ exports[`Calendar > renders with default value correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -836,6 +869,7 @@ exports[`Calendar > renders with default value correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -859,6 +893,7 @@ exports[`Calendar > renders with default value correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -911,6 +946,7 @@ exports[`Calendar > renders with disabled correctly 1`] = `
     <table tabindex="-1" role="grid" aria-disabled="true" data-disabled="" 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">
+          <!--v-if-->
           <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>
@@ -922,6 +958,7 @@ exports[`Calendar > renders with disabled correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -945,6 +982,7 @@ exports[`Calendar > renders with disabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -968,6 +1006,7 @@ exports[`Calendar > renders with disabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -991,6 +1030,7 @@ exports[`Calendar > renders with disabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -1014,6 +1054,7 @@ exports[`Calendar > renders with disabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -1037,6 +1078,7 @@ exports[`Calendar > renders with disabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -1089,6 +1131,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -1100,6 +1143,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -1123,6 +1167,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -1146,6 +1191,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -1169,6 +1215,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -1192,6 +1239,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -1215,6 +1263,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -1267,6 +1316,7 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -1278,6 +1328,7 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -1301,6 +1352,7 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -1324,6 +1376,7 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -1347,6 +1400,7 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -1370,6 +1424,7 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -1393,6 +1448,7 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -1445,6 +1501,7 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -1456,6 +1513,7 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -1479,6 +1537,7 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -1502,6 +1561,7 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -1525,6 +1585,7 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -1548,6 +1609,7 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -1571,6 +1633,7 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -1623,6 +1686,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -1634,6 +1698,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -1657,6 +1722,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -1680,6 +1746,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -1703,6 +1770,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -1726,6 +1794,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -1749,6 +1818,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -1801,6 +1871,7 @@ exports[`Calendar > renders with multiple correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -1812,6 +1883,7 @@ exports[`Calendar > renders with multiple correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -1835,6 +1907,7 @@ exports[`Calendar > renders with multiple correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -1858,6 +1931,7 @@ exports[`Calendar > renders with multiple correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -1881,6 +1955,7 @@ exports[`Calendar > renders with multiple correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -1904,6 +1979,7 @@ exports[`Calendar > renders with multiple correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -1927,6 +2003,7 @@ exports[`Calendar > renders with multiple correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -1979,6 +2056,7 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -1990,6 +2068,7 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -2013,6 +2092,7 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -2036,6 +2116,7 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -2059,6 +2140,7 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -2082,6 +2164,7 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -2105,6 +2188,7 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -2157,6 +2241,7 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -2168,6 +2253,7 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -2191,6 +2277,7 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -2214,6 +2301,7 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -2237,6 +2325,7 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -2260,6 +2349,7 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -2283,6 +2373,7 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -2335,6 +2426,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -2346,6 +2438,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -2369,6 +2462,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -2392,6 +2486,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -2415,6 +2510,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -2438,6 +2534,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -2461,6 +2558,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -2488,6 +2586,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -2499,6 +2598,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -2522,6 +2622,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -2545,6 +2646,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">9</div>
           </td>
@@ -2568,6 +2670,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">16</div>
           </td>
@@ -2591,6 +2694,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">23</div>
           </td>
@@ -2614,6 +2718,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -2666,6 +2771,7 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -2677,6 +2783,7 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -2700,6 +2807,7 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -2723,6 +2831,7 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -2746,6 +2855,7 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -2769,6 +2879,7 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -2792,6 +2903,7 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -2844,6 +2956,7 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -2855,6 +2968,7 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -2878,6 +2992,7 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -2901,6 +3016,7 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -2924,6 +3040,7 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -2947,6 +3064,7 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -2970,6 +3088,7 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -3025,6 +3144,7 @@ exports[`Calendar > renders with range correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -3036,6 +3156,7 @@ exports[`Calendar > renders with range correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -3059,6 +3180,7 @@ exports[`Calendar > renders with range correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -3082,6 +3204,7 @@ exports[`Calendar > renders with range correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -3105,6 +3228,7 @@ exports[`Calendar > renders with range correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -3128,6 +3252,7 @@ exports[`Calendar > renders with range correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -3151,6 +3276,7 @@ exports[`Calendar > renders with range correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -3200,6 +3326,7 @@ exports[`Calendar > renders with readonly correctly 1`] = `
     <table tabindex="-1" role="grid" aria-readonly="true" data-readonly="" 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">
+          <!--v-if-->
           <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>
@@ -3211,6 +3338,7 @@ exports[`Calendar > renders with readonly correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -3234,6 +3362,7 @@ exports[`Calendar > renders with readonly correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -3257,6 +3386,7 @@ exports[`Calendar > renders with readonly correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -3280,6 +3410,7 @@ exports[`Calendar > renders with readonly correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -3303,6 +3434,7 @@ exports[`Calendar > renders with readonly correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -3326,6 +3458,7 @@ exports[`Calendar > renders with readonly correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -3378,6 +3511,7 @@ exports[`Calendar > renders with size lg correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -3389,6 +3523,7 @@ exports[`Calendar > renders with size lg correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-9 text-md">29</div>
           </td>
@@ -3412,6 +3547,7 @@ exports[`Calendar > renders with size lg correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-9 text-md">5</div>
           </td>
@@ -3435,6 +3571,7 @@ exports[`Calendar > renders with size lg correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-9 text-md">12</div>
           </td>
@@ -3458,6 +3595,7 @@ exports[`Calendar > renders with size lg correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-9 text-md">19</div>
           </td>
@@ -3481,6 +3619,7 @@ exports[`Calendar > renders with size lg correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-9 text-md">26</div>
           </td>
@@ -3504,6 +3643,7 @@ exports[`Calendar > renders with size lg correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-9 text-md">2</div>
           </td>
@@ -3556,6 +3696,7 @@ exports[`Calendar > renders with size md correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -3567,6 +3708,7 @@ exports[`Calendar > renders with size md correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -3590,6 +3732,7 @@ exports[`Calendar > renders with size md correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -3613,6 +3756,7 @@ exports[`Calendar > renders with size md correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -3636,6 +3780,7 @@ exports[`Calendar > renders with size md correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -3659,6 +3804,7 @@ exports[`Calendar > renders with size md correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -3682,6 +3828,7 @@ exports[`Calendar > renders with size md correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -3734,6 +3881,7 @@ exports[`Calendar > renders with size sm correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -3745,6 +3893,7 @@ exports[`Calendar > renders with size sm correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">29</div>
           </td>
@@ -3768,6 +3917,7 @@ exports[`Calendar > renders with size sm correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">5</div>
           </td>
@@ -3791,6 +3941,7 @@ exports[`Calendar > renders with size sm correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">12</div>
           </td>
@@ -3814,6 +3965,7 @@ exports[`Calendar > renders with size sm correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">19</div>
           </td>
@@ -3837,6 +3989,7 @@ exports[`Calendar > renders with size sm correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">26</div>
           </td>
@@ -3860,6 +4013,7 @@ exports[`Calendar > renders with size sm correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">2</div>
           </td>
@@ -3912,6 +4066,7 @@ exports[`Calendar > renders with size xl correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -3923,6 +4078,7 @@ exports[`Calendar > renders with size xl correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-10 text-lg">29</div>
           </td>
@@ -3946,6 +4102,7 @@ exports[`Calendar > renders with size xl correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-10 text-lg">5</div>
           </td>
@@ -3969,6 +4126,7 @@ exports[`Calendar > renders with size xl correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-10 text-lg">12</div>
           </td>
@@ -3992,6 +4150,7 @@ exports[`Calendar > renders with size xl correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-10 text-lg">19</div>
           </td>
@@ -4015,6 +4174,7 @@ exports[`Calendar > renders with size xl correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-10 text-lg">26</div>
           </td>
@@ -4038,6 +4198,7 @@ exports[`Calendar > renders with size xl correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-10 text-lg">2</div>
           </td>
@@ -4090,6 +4251,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -4101,6 +4263,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">29</div>
           </td>
@@ -4124,6 +4287,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">5</div>
           </td>
@@ -4147,6 +4311,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">12</div>
           </td>
@@ -4170,6 +4335,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">19</div>
           </td>
@@ -4193,6 +4359,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">26</div>
           </td>
@@ -4216,6 +4383,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-7">2</div>
           </td>
@@ -4268,6 +4436,7 @@ exports[`Calendar > renders with ui correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -4279,6 +4448,7 @@ exports[`Calendar > renders with ui correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -4302,6 +4472,7 @@ exports[`Calendar > renders with ui correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -4325,6 +4496,7 @@ exports[`Calendar > renders with ui correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -4348,6 +4520,7 @@ exports[`Calendar > renders with ui correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -4371,6 +4544,7 @@ exports[`Calendar > renders with ui correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -4394,6 +4568,7 @@ exports[`Calendar > renders with ui correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -4446,6 +4621,7 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -4457,6 +4633,7 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -4480,6 +4657,7 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -4503,6 +4681,7 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -4526,6 +4705,7 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -4549,6 +4729,7 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -4572,6 +4753,7 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -4624,6 +4806,7 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -4635,6 +4818,7 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">30</div>
           </td>
@@ -4658,6 +4842,7 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">6</div>
           </td>
@@ -4681,6 +4866,7 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">13</div>
           </td>
@@ -4704,6 +4890,7 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">20</div>
           </td>
@@ -4727,6 +4914,7 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">27</div>
           </td>
@@ -4750,6 +4938,7 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">3</div>
           </td>
@@ -4802,6 +4991,7 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -4813,6 +5003,7 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -4836,6 +5027,7 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -4859,6 +5051,7 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -4882,6 +5075,7 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -4905,6 +5099,7 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -4928,6 +5123,7 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -4980,6 +5176,7 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -4991,6 +5188,7 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -5014,6 +5212,7 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -5037,6 +5236,7 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -5060,6 +5260,7 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -5083,6 +5284,7 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -5131,6 +5333,7 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -5142,6 +5345,7 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -5165,6 +5369,7 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -5188,6 +5393,7 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -5211,6 +5417,7 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -5234,6 +5441,7 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -5257,6 +5465,192 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
+          <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <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>"
+`;
+
+exports[`Calendar > renders without weekNumbers correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" weeknumbers="true">
+  <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>
+      <!--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>
+      <!--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>
+      <!--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>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-8">
+          <th aria-label="week" class="rounded-md text-muted text-xs">wk</th>
+          <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>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">52</td>
+          <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">1</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">2</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">3</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">4</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">5</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>
@@ -5305,6 +5699,7 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
     <table tabindex="-1" role="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">
+          <!--v-if-->
           <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>
@@ -5316,6 +5711,7 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
       </thead>
       <tbody class="grid">
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">29</div>
           </td>
@@ -5339,6 +5735,7 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">5</div>
           </td>
@@ -5362,6 +5759,7 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">12</div>
           </td>
@@ -5385,6 +5783,7 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">19</div>
           </td>
@@ -5408,6 +5807,7 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">26</div>
           </td>
@@ -5431,6 +5831,7 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
           </td>
         </tr>
         <tr class="grid grid-cols-7 place-items-center">
+          <!--v-if-->
           <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">2</div>
           </td>

From c0a2386de03044547eb050f156218831879ee9f2 Mon Sep 17 00:00:00 2001
From: J-michalek <jaku.michalek@gmail.com>
Date: Sun, 20 Jul 2025 15:27:16 +0200
Subject: [PATCH 2/4] feat(locale): add calendar.week and calendar.weekShort

I'm not sure if we truly want these, but I've made them
just in case, I only undestand cs, sk and en so the rest
are AI translations...

I did some research and I'm not sure if we really need this
header as it is not space efficient and most users know that
the leftmost column in calendar is used for week numbers.
---
 src/runtime/locale/ar.ts    | 4 +++-
 src/runtime/locale/az.ts    | 4 +++-
 src/runtime/locale/bg.ts    | 4 +++-
 src/runtime/locale/bn.ts    | 4 +++-
 src/runtime/locale/ca.ts    | 4 +++-
 src/runtime/locale/ckb.ts   | 4 +++-
 src/runtime/locale/cs.ts    | 4 +++-
 src/runtime/locale/da.ts    | 4 +++-
 src/runtime/locale/de.ts    | 4 +++-
 src/runtime/locale/el.ts    | 4 +++-
 src/runtime/locale/en.ts    | 4 +++-
 src/runtime/locale/es.ts    | 4 +++-
 src/runtime/locale/et.ts    | 4 +++-
 src/runtime/locale/fa_ir.ts | 4 +++-
 src/runtime/locale/fi.ts    | 4 +++-
 src/runtime/locale/fr.ts    | 4 +++-
 src/runtime/locale/he.ts    | 4 +++-
 src/runtime/locale/hi.ts    | 4 +++-
 src/runtime/locale/hu.ts    | 4 +++-
 src/runtime/locale/hy.ts    | 4 +++-
 src/runtime/locale/id.ts    | 4 +++-
 src/runtime/locale/it.ts    | 4 +++-
 src/runtime/locale/ja.ts    | 6 ++++--
 src/runtime/locale/kk.ts    | 4 +++-
 src/runtime/locale/km.ts    | 4 +++-
 src/runtime/locale/ko.ts    | 4 +++-
 src/runtime/locale/ky.ts    | 4 +++-
 src/runtime/locale/lb.ts    | 4 +++-
 src/runtime/locale/lt.ts    | 4 +++-
 src/runtime/locale/mn.ts    | 4 +++-
 src/runtime/locale/ms.ts    | 4 +++-
 src/runtime/locale/nb_no.ts | 4 +++-
 src/runtime/locale/nl.ts    | 4 +++-
 src/runtime/locale/pl.ts    | 4 +++-
 src/runtime/locale/pt.ts    | 4 +++-
 src/runtime/locale/pt_br.ts | 4 +++-
 src/runtime/locale/ro.ts    | 4 +++-
 src/runtime/locale/ru.ts    | 4 +++-
 src/runtime/locale/sk.ts    | 4 +++-
 src/runtime/locale/sl.ts    | 4 +++-
 src/runtime/locale/sv.ts    | 4 +++-
 src/runtime/locale/th.ts    | 4 +++-
 src/runtime/locale/tj.ts    | 4 +++-
 src/runtime/locale/tr.ts    | 4 +++-
 src/runtime/locale/ug_cn.ts | 4 +++-
 src/runtime/locale/uk.ts    | 4 +++-
 src/runtime/locale/ur.ts    | 4 +++-
 src/runtime/locale/uz.ts    | 4 +++-
 src/runtime/locale/vi.ts    | 4 +++-
 src/runtime/locale/zh_cn.ts | 4 +++-
 src/runtime/locale/zh_tw.ts | 4 +++-
 src/runtime/types/locale.ts | 2 ++
 52 files changed, 156 insertions(+), 52 deletions(-)

diff --git a/src/runtime/locale/ar.ts b/src/runtime/locale/ar.ts
index 8739521c1f..643c853de0 100644
--- a/src/runtime/locale/ar.ts
+++ b/src/runtime/locale/ar.ts
@@ -15,7 +15,9 @@ export default defineLocale<Messages>({
       prevYear: 'السنة السابقة',
       nextYear: 'السنة المقبلة',
       prevMonth: 'الشهر السابق',
-      nextMonth: 'الشهر المقبل'
+      nextMonth: 'الشهر المقبل',
+      week: 'أسبوع',
+      weekShort: 'أسب.'
     },
     inputNumber: {
       increment: 'زيادة',
diff --git a/src/runtime/locale/az.ts b/src/runtime/locale/az.ts
index 64d16d9388..552d978860 100644
--- a/src/runtime/locale/az.ts
+++ b/src/runtime/locale/az.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Əvvəlki il',
       nextYear: 'Növbəti il',
       prevMonth: 'Əvvəlki ay',
-      nextMonth: 'Növbəti ay'
+      nextMonth: 'Növbəti ay',
+      week: 'həftə',
+      weekShort: 'həf.'
     },
     inputNumber: {
       increment: 'Artır',
diff --git a/src/runtime/locale/bg.ts b/src/runtime/locale/bg.ts
index 7c7caafb90..42276cc096 100644
--- a/src/runtime/locale/bg.ts
+++ b/src/runtime/locale/bg.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Предишна година',
       nextYear: 'Следваща година',
       prevMonth: 'Предишен месец',
-      nextMonth: 'Следващ месец'
+      nextMonth: 'Следващ месец',
+      week: 'седмица',
+      weekShort: 'седм.'
     },
     inputNumber: {
       increment: 'Увеличаване',
diff --git a/src/runtime/locale/bn.ts b/src/runtime/locale/bn.ts
index 1a88ca2361..e6a241569b 100644
--- a/src/runtime/locale/bn.ts
+++ b/src/runtime/locale/bn.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'পূর্ববর্তী বছর',
       nextYear: 'পরবর্তী বছর',
       prevMonth: 'পূর্ববর্তী মাস',
-      nextMonth: 'পরবর্তী মাস'
+      nextMonth: 'পরবর্তী মাস',
+      week: 'সপ্তাহ',
+      weekShort: 'সপ্.'
     },
     inputNumber: {
       increment: 'বৃদ্ধি করুন',
diff --git a/src/runtime/locale/ca.ts b/src/runtime/locale/ca.ts
index 2353756183..464988cde5 100644
--- a/src/runtime/locale/ca.ts
+++ b/src/runtime/locale/ca.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Any anterior',
       nextYear: 'Any següent',
       prevMonth: 'Mes anterior',
-      nextMonth: 'Mes següent'
+      nextMonth: 'Mes següent',
+      week: 'setmana',
+      weekShort: 'setm.'
     },
     inputNumber: {
       increment: 'Incrementar',
diff --git a/src/runtime/locale/ckb.ts b/src/runtime/locale/ckb.ts
index 3b92732d59..27fc20dea3 100644
--- a/src/runtime/locale/ckb.ts
+++ b/src/runtime/locale/ckb.ts
@@ -15,7 +15,9 @@ export default defineLocale<Messages>({
       prevYear: 'ساڵی پێشوو',
       nextYear: 'ساڵی داهاتوو',
       prevMonth: 'مانگی پێشوو',
-      nextMonth: 'مانگی داهاتوو'
+      nextMonth: 'مانگی داهاتوو',
+      week: 'هەفتە',
+      weekShort: 'هەف.'
     },
     inputNumber: {
       increment: 'زیادکردن',
diff --git a/src/runtime/locale/cs.ts b/src/runtime/locale/cs.ts
index 87752a1768..5acbdd3ebb 100644
--- a/src/runtime/locale/cs.ts
+++ b/src/runtime/locale/cs.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Předchozí rok',
       nextYear: 'Další rok',
       prevMonth: 'Předchozí měsíc',
-      nextMonth: 'Další měsíc'
+      nextMonth: 'Další měsíc',
+      week: 'týden',
+      weekShort: 'týd.'
     },
     inputNumber: {
       increment: 'Zvýšit',
diff --git a/src/runtime/locale/da.ts b/src/runtime/locale/da.ts
index 79c0db2fb2..5693ee36fe 100644
--- a/src/runtime/locale/da.ts
+++ b/src/runtime/locale/da.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Forrige år',
       nextYear: 'Næste år',
       prevMonth: 'Forrige måned',
-      nextMonth: 'Næste måned'
+      nextMonth: 'Næste måned',
+      week: 'uge',
+      weekShort: 'u.'
     },
     inputNumber: {
       increment: 'Øg',
diff --git a/src/runtime/locale/de.ts b/src/runtime/locale/de.ts
index 397de37592..198eab679f 100644
--- a/src/runtime/locale/de.ts
+++ b/src/runtime/locale/de.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Vorheriges Jahr',
       nextYear: 'Nächstes Jahr',
       prevMonth: 'Vorheriger Monat',
-      nextMonth: 'Nächster Monat'
+      nextMonth: 'Nächster Monat',
+      week: 'Woche',
+      weekShort: 'KW'
     },
     inputNumber: {
       increment: 'Erhöhen',
diff --git a/src/runtime/locale/el.ts b/src/runtime/locale/el.ts
index 39d8a6c460..88866539e4 100644
--- a/src/runtime/locale/el.ts
+++ b/src/runtime/locale/el.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Προηγούμενο έτος',
       nextYear: 'Επόμενο έτος',
       prevMonth: 'Προηγούμενος μήνας',
-      nextMonth: 'Επόμενος μήνας'
+      nextMonth: 'Επόμενος μήνας',
+      week: 'εβδομάδα',
+      weekShort: 'εβδ.'
     },
     inputNumber: {
       increment: 'Αύξηση',
diff --git a/src/runtime/locale/en.ts b/src/runtime/locale/en.ts
index 2734b46863..57296aad4b 100644
--- a/src/runtime/locale/en.ts
+++ b/src/runtime/locale/en.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Previous year',
       nextYear: 'Next year',
       prevMonth: 'Previous month',
-      nextMonth: 'Next month'
+      nextMonth: 'Next month',
+      week: 'week',
+      weekShort: 'wk'
     },
     inputNumber: {
       increment: 'Increment',
diff --git a/src/runtime/locale/es.ts b/src/runtime/locale/es.ts
index a2bbc60f4f..0c0aee1247 100644
--- a/src/runtime/locale/es.ts
+++ b/src/runtime/locale/es.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Año anterior',
       nextYear: 'Año siguiente',
       prevMonth: 'Mes anterior',
-      nextMonth: 'Mes siguiente'
+      nextMonth: 'Mes siguiente',
+      week: 'semana',
+      weekShort: 'sem.'
     },
     inputNumber: {
       increment: 'Incremento',
diff --git a/src/runtime/locale/et.ts b/src/runtime/locale/et.ts
index d1237587e1..1eee6f8ebb 100644
--- a/src/runtime/locale/et.ts
+++ b/src/runtime/locale/et.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Eelmine aasta',
       nextYear: 'Järgmine aasta',
       prevMonth: 'Eelmine kuu',
-      nextMonth: 'Järgmine kuu'
+      nextMonth: 'Järgmine kuu',
+      week: 'nädal',
+      weekShort: 'näd'
     },
     inputNumber: {
       increment: 'Suurenda',
diff --git a/src/runtime/locale/fa_ir.ts b/src/runtime/locale/fa_ir.ts
index 84a4f9a45d..32a2ced7f2 100644
--- a/src/runtime/locale/fa_ir.ts
+++ b/src/runtime/locale/fa_ir.ts
@@ -15,7 +15,9 @@ export default defineLocale<Messages>({
       prevYear: 'سال گذشته',
       nextYear: 'سال آینده',
       prevMonth: 'ماه گذشته',
-      nextMonth: 'ماه آینده'
+      nextMonth: 'ماه آینده',
+      week: 'هفته',
+      weekShort: 'هف.'
     },
     inputNumber: {
       increment: 'افزایش',
diff --git a/src/runtime/locale/fi.ts b/src/runtime/locale/fi.ts
index de370ebc2b..cf1bd20607 100644
--- a/src/runtime/locale/fi.ts
+++ b/src/runtime/locale/fi.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Edellinen vuosi',
       nextYear: 'Seuraava vuosi',
       prevMonth: 'Edellinen kuukausi',
-      nextMonth: 'Seuraava kuukausi'
+      nextMonth: 'Seuraava kuukausi',
+      week: 'viikko',
+      weekShort: 'vk'
     },
     inputNumber: {
       increment: 'Kasvata',
diff --git a/src/runtime/locale/fr.ts b/src/runtime/locale/fr.ts
index 3b69821dd4..451552c72a 100644
--- a/src/runtime/locale/fr.ts
+++ b/src/runtime/locale/fr.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Année précédente',
       nextYear: 'Année suivante',
       prevMonth: 'Mois précédent',
-      nextMonth: 'Mois suivant'
+      nextMonth: 'Mois suivant',
+      week: 'semaine',
+      weekShort: 'sem.'
     },
     inputNumber: {
       increment: 'Augmenter',
diff --git a/src/runtime/locale/he.ts b/src/runtime/locale/he.ts
index 36f743a612..c708d967e9 100644
--- a/src/runtime/locale/he.ts
+++ b/src/runtime/locale/he.ts
@@ -15,7 +15,9 @@ export default defineLocale<Messages>({
       prevYear: 'שנה קודמת',
       nextYear: 'שנה הבאה',
       prevMonth: 'חודש קודם',
-      nextMonth: 'חודש הבא'
+      nextMonth: 'חודש הבא',
+      week: 'שבוע',
+      weekShort: 'שב.'
     },
     inputNumber: {
       increment: 'הוסף',
diff --git a/src/runtime/locale/hi.ts b/src/runtime/locale/hi.ts
index ec69400d0a..e969392b8f 100644
--- a/src/runtime/locale/hi.ts
+++ b/src/runtime/locale/hi.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'पिछला वर्ष',
       nextYear: 'अगला वर्ष',
       prevMonth: 'पिछला महीना',
-      nextMonth: 'अगला महीना'
+      nextMonth: 'अगला महीना',
+      week: 'सप्ताह',
+      weekShort: 'सप्.'
     },
     inputNumber: {
       increment: 'बढ़ाना',
diff --git a/src/runtime/locale/hu.ts b/src/runtime/locale/hu.ts
index 4152dc3fe6..922b5ad6e0 100644
--- a/src/runtime/locale/hu.ts
+++ b/src/runtime/locale/hu.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Előző év',
       nextYear: 'Következő év',
       prevMonth: 'Előző hónap',
-      nextMonth: 'Következő hónap'
+      nextMonth: 'Következő hónap',
+      week: 'hét',
+      weekShort: 'hét'
     },
     inputNumber: {
       increment: 'Növel',
diff --git a/src/runtime/locale/hy.ts b/src/runtime/locale/hy.ts
index d296d54350..e3ef253c4d 100644
--- a/src/runtime/locale/hy.ts
+++ b/src/runtime/locale/hy.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Նախորդ տարի',
       nextYear: 'Հաջորդ տարի',
       prevMonth: 'Նախորդ ամիս',
-      nextMonth: 'Հաջորդ ամիս'
+      nextMonth: 'Հաջորդ ամիս',
+      week: 'շաբաթ',
+      weekShort: 'շաբ.'
     },
     inputNumber: {
       increment: 'Ավելացնել',
diff --git a/src/runtime/locale/id.ts b/src/runtime/locale/id.ts
index 401b9681ea..731dd79281 100644
--- a/src/runtime/locale/id.ts
+++ b/src/runtime/locale/id.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Tahun sebelumnya',
       nextYear: 'Tahun berikutnya',
       prevMonth: 'Bulan sebelumnya',
-      nextMonth: 'Bulan berikutnya'
+      nextMonth: 'Bulan berikutnya',
+      week: 'minggu',
+      weekShort: 'mgg.'
     },
     inputNumber: {
       increment: 'Tambah',
diff --git a/src/runtime/locale/it.ts b/src/runtime/locale/it.ts
index a2bc323ade..512a9736b2 100644
--- a/src/runtime/locale/it.ts
+++ b/src/runtime/locale/it.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Anno precedente',
       nextYear: 'Anno successivo',
       prevMonth: 'Mese precedente',
-      nextMonth: 'Mese successivo'
+      nextMonth: 'Mese successivo',
+      week: 'settimana',
+      weekShort: 'sett.'
     },
     inputNumber: {
       increment: 'Aumenta',
diff --git a/src/runtime/locale/ja.ts b/src/runtime/locale/ja.ts
index 2525f7f692..5ca544de02 100644
--- a/src/runtime/locale/ja.ts
+++ b/src/runtime/locale/ja.ts
@@ -12,9 +12,11 @@ export default defineLocale<Messages>({
     },
     calendar: {
       prevYear: '前年',
-      nextYear: '翌年',
+      nextYear: '来年',
       prevMonth: '前月',
-      nextMonth: '翌月'
+      nextMonth: '来月',
+      week: '週',
+      weekShort: '週'
     },
     inputNumber: {
       increment: '増やす',
diff --git a/src/runtime/locale/kk.ts b/src/runtime/locale/kk.ts
index d2c1ccfdae..21ac246113 100644
--- a/src/runtime/locale/kk.ts
+++ b/src/runtime/locale/kk.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Алдыңғы жыл',
       nextYear: 'Келесі жыл',
       prevMonth: 'Алдыңғы ай',
-      nextMonth: 'Келесі ай'
+      nextMonth: 'Келесі ай',
+      week: 'апта',
+      weekShort: 'ап.'
     },
     inputNumber: {
       increment: 'Арттыру',
diff --git a/src/runtime/locale/km.ts b/src/runtime/locale/km.ts
index 41f7f8fea3..3d7e8e3b8b 100644
--- a/src/runtime/locale/km.ts
+++ b/src/runtime/locale/km.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'ឆ្នាំមុន',
       nextYear: 'ឆ្នាំបន្ទាប់',
       prevMonth: 'ខែមុន',
-      nextMonth: 'ខែបន្ទាប់'
+      nextMonth: 'ខែបន្ទាប់',
+      week: 'សប្តាហ៍',
+      weekShort: 'សប្ដា'
     },
     inputNumber: {
       increment: 'បង្កើន',
diff --git a/src/runtime/locale/ko.ts b/src/runtime/locale/ko.ts
index 16e0d3b87e..2ba37cb743 100644
--- a/src/runtime/locale/ko.ts
+++ b/src/runtime/locale/ko.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: '이전 해',
       nextYear: '다음 해',
       prevMonth: '이전 달',
-      nextMonth: '다음 달'
+      nextMonth: '다음 달',
+      week: '주',
+      weekShort: '주'
     },
     inputNumber: {
       increment: '증가',
diff --git a/src/runtime/locale/ky.ts b/src/runtime/locale/ky.ts
index 4aa91484cb..81f07ef9f5 100644
--- a/src/runtime/locale/ky.ts
+++ b/src/runtime/locale/ky.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Алдыңкы жыл',
       nextYear: 'Кийинки жыл',
       prevMonth: 'Алдыңкы ай',
-      nextMonth: 'Кийинки ай'
+      nextMonth: 'Кийинки ай',
+      week: 'жума',
+      weekShort: 'жум.'
     },
     inputNumber: {
       increment: 'Кошуу',
diff --git a/src/runtime/locale/lb.ts b/src/runtime/locale/lb.ts
index b5eb2c8e60..cc173f2c3f 100644
--- a/src/runtime/locale/lb.ts
+++ b/src/runtime/locale/lb.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Viregt Joer',
       nextYear: 'Nächst Joer',
       prevMonth: 'Virege Mount',
-      nextMonth: 'Nächste Mount'
+      nextMonth: 'Nächste Mount',
+      week: 'Woch',
+      weekShort: 'W.'
     },
     inputNumber: {
       increment: 'Inkrementéieren',
diff --git a/src/runtime/locale/lt.ts b/src/runtime/locale/lt.ts
index 4c215a3506..42a104c342 100644
--- a/src/runtime/locale/lt.ts
+++ b/src/runtime/locale/lt.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Ankstesni metai',
       nextYear: 'Kiti metai',
       prevMonth: 'Ankstesnis mėnuo',
-      nextMonth: 'Kitas mėnuo'
+      nextMonth: 'Kitas mėnuo',
+      week: 'savaitė',
+      weekShort: 'sav.'
     },
     inputNumber: {
       increment: 'Padidinti',
diff --git a/src/runtime/locale/mn.ts b/src/runtime/locale/mn.ts
index 2b02c1ec8b..56542cf6c3 100644
--- a/src/runtime/locale/mn.ts
+++ b/src/runtime/locale/mn.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Өмнөх жил',
       nextYear: 'Дараа жил',
       prevMonth: 'Өмнөх сар',
-      nextMonth: 'Дараа сар'
+      nextMonth: 'Дараа сар',
+      week: '7 хоног',
+      weekShort: '7х'
     },
     inputNumber: {
       increment: 'Нэмэх',
diff --git a/src/runtime/locale/ms.ts b/src/runtime/locale/ms.ts
index b03bba8d59..383f4f2e19 100644
--- a/src/runtime/locale/ms.ts
+++ b/src/runtime/locale/ms.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Tahun sebelum',
       nextYear: 'Tahun seterusnya',
       prevMonth: 'Bulan sebelum',
-      nextMonth: 'Bulan seterusnya'
+      nextMonth: 'Bulan seterusnya',
+      week: 'minggu',
+      weekShort: 'mgg'
     },
     inputNumber: {
       increment: 'Naikkan',
diff --git a/src/runtime/locale/nb_no.ts b/src/runtime/locale/nb_no.ts
index a34b92e098..99fe63f9fc 100644
--- a/src/runtime/locale/nb_no.ts
+++ b/src/runtime/locale/nb_no.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Forrige år',
       nextYear: 'Neste år',
       prevMonth: 'Forrige måned',
-      nextMonth: 'Neste måned'
+      nextMonth: 'Neste måned',
+      week: 'uke',
+      weekShort: 'u.'
     },
     inputNumber: {
       increment: 'Øk',
diff --git a/src/runtime/locale/nl.ts b/src/runtime/locale/nl.ts
index 9b815a0b41..7e042e7456 100644
--- a/src/runtime/locale/nl.ts
+++ b/src/runtime/locale/nl.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Vorig jaar',
       nextYear: 'Volgend jaar',
       prevMonth: 'Vorige maand',
-      nextMonth: 'Volgende maand'
+      nextMonth: 'Volgende maand',
+      week: 'week',
+      weekShort: 'wk'
     },
     inputNumber: {
       increment: 'Verhogen',
diff --git a/src/runtime/locale/pl.ts b/src/runtime/locale/pl.ts
index 4794b592af..2bae4bacc6 100644
--- a/src/runtime/locale/pl.ts
+++ b/src/runtime/locale/pl.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Poprzedni rok',
       nextYear: 'Przyszły rok',
       prevMonth: 'Poprzedni miesiąc',
-      nextMonth: 'Przyszły miesiąc'
+      nextMonth: 'Przyszły miesiąc',
+      week: 'tydzień',
+      weekShort: 'tydz.'
     },
     inputNumber: {
       increment: 'Zwiększ',
diff --git a/src/runtime/locale/pt.ts b/src/runtime/locale/pt.ts
index 318fb40a9c..d1960a353e 100644
--- a/src/runtime/locale/pt.ts
+++ b/src/runtime/locale/pt.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Ano anterior',
       nextYear: 'Próximo ano',
       prevMonth: 'Mês anterior',
-      nextMonth: 'Próximo mês'
+      nextMonth: 'Próximo mês',
+      week: 'semana',
+      weekShort: 'sem.'
     },
     inputNumber: {
       increment: 'Incrementar',
diff --git a/src/runtime/locale/pt_br.ts b/src/runtime/locale/pt_br.ts
index ab31ad20e8..3af99570bd 100644
--- a/src/runtime/locale/pt_br.ts
+++ b/src/runtime/locale/pt_br.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Ano anterior',
       nextYear: 'Próximo ano',
       prevMonth: 'Mês anterior',
-      nextMonth: 'Próximo mês'
+      nextMonth: 'Próximo mês',
+      week: 'semana',
+      weekShort: 'sem.'
     },
     inputNumber: {
       increment: 'Incrementar',
diff --git a/src/runtime/locale/ro.ts b/src/runtime/locale/ro.ts
index 135fc5acbf..ad27c157e7 100644
--- a/src/runtime/locale/ro.ts
+++ b/src/runtime/locale/ro.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Anul precedent',
       nextYear: 'Anul următor',
       prevMonth: 'Luna precedentă',
-      nextMonth: 'Luna următoare'
+      nextMonth: 'Luna următoare',
+      week: 'săptămână',
+      weekShort: 'săpt.'
     },
     inputNumber: {
       increment: 'Crește',
diff --git a/src/runtime/locale/ru.ts b/src/runtime/locale/ru.ts
index 57b3cb088c..ad227e41a8 100644
--- a/src/runtime/locale/ru.ts
+++ b/src/runtime/locale/ru.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Предыдущий год',
       nextYear: 'Следующий год',
       prevMonth: 'Предыдущий месяц',
-      nextMonth: 'Следующий месяц'
+      nextMonth: 'Следующий месяц',
+      week: 'неделя',
+      weekShort: 'нед.'
     },
     inputNumber: {
       increment: 'Увеличить',
diff --git a/src/runtime/locale/sk.ts b/src/runtime/locale/sk.ts
index c781e94a05..bf82bf3bde 100644
--- a/src/runtime/locale/sk.ts
+++ b/src/runtime/locale/sk.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Predchádzajúci rok',
       nextYear: 'Nasledujúci rok',
       prevMonth: 'Predchádzajúci mesiac',
-      nextMonth: 'Nasledujúci mesiac'
+      nextMonth: 'Nasledujúci mesiac',
+      week: 'týždeň',
+      weekShort: 'týž.'
     },
     inputNumber: {
       increment: 'Zvýšiť',
diff --git a/src/runtime/locale/sl.ts b/src/runtime/locale/sl.ts
index 36ca9bf3eb..9b1ecd45d0 100644
--- a/src/runtime/locale/sl.ts
+++ b/src/runtime/locale/sl.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Prejšnje leto',
       nextYear: 'Naslednje leto',
       prevMonth: 'Prejšnji mesec',
-      nextMonth: 'Naslednji mesec'
+      nextMonth: 'Naslednji mesec',
+      week: 'teden',
+      weekShort: 'ted.'
     },
     inputNumber: {
       increment: 'Povišaj',
diff --git a/src/runtime/locale/sv.ts b/src/runtime/locale/sv.ts
index e729289dbf..2f7b614270 100644
--- a/src/runtime/locale/sv.ts
+++ b/src/runtime/locale/sv.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Föregående år',
       nextYear: 'Nästa år',
       prevMonth: 'Föregående månad',
-      nextMonth: 'Nästa månad'
+      nextMonth: 'Nästa månad',
+      week: 'vecka',
+      weekShort: 'v.'
     },
     inputNumber: {
       increment: 'Öka',
diff --git a/src/runtime/locale/th.ts b/src/runtime/locale/th.ts
index 42d4ee2d7b..a58679e55e 100644
--- a/src/runtime/locale/th.ts
+++ b/src/runtime/locale/th.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'ปีก่อนหน้า',
       nextYear: 'ปีถัดไป',
       prevMonth: 'เดือนก่อนหน้า',
-      nextMonth: 'เดือนถัดไป'
+      nextMonth: 'เดือนถัดไป',
+      week: 'สัปดาห์',
+      weekShort: 'สป.'
     },
     inputNumber: {
       increment: 'เพิ่ม',
diff --git a/src/runtime/locale/tj.ts b/src/runtime/locale/tj.ts
index 580040be42..f003e1734f 100644
--- a/src/runtime/locale/tj.ts
+++ b/src/runtime/locale/tj.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Соли гузашта',
       nextYear: 'Соли оянда',
       prevMonth: 'Моҳи гузашта',
-      nextMonth: 'Моҳи оянда'
+      nextMonth: 'Моҳи оянда',
+      week: 'ҳафта',
+      weekShort: 'ҳаф.'
     },
     inputNumber: {
       increment: 'Зиёд кардан',
diff --git a/src/runtime/locale/tr.ts b/src/runtime/locale/tr.ts
index d5c0943cf2..1d6aff1fb9 100644
--- a/src/runtime/locale/tr.ts
+++ b/src/runtime/locale/tr.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Önceki yıl',
       nextYear: 'Sonraki yıl',
       prevMonth: 'Önceki ay',
-      nextMonth: 'Sonraki ay'
+      nextMonth: 'Sonraki ay',
+      week: 'hafta',
+      weekShort: 'hft.'
     },
     inputNumber: {
       increment: 'Arttır',
diff --git a/src/runtime/locale/ug_cn.ts b/src/runtime/locale/ug_cn.ts
index 8acb37c25c..dc9a78d310 100644
--- a/src/runtime/locale/ug_cn.ts
+++ b/src/runtime/locale/ug_cn.ts
@@ -15,7 +15,9 @@ export default defineLocale<Messages>({
       prevYear: 'ئالدىنقى يىل',
       nextYear: 'كېلەر يىل',
       prevMonth: 'ئالدىنقى ئاي',
-      nextMonth: 'كېلەر ئاي'
+      nextMonth: 'كېلەر ئاي',
+      week: 'ھەپتە',
+      weekShort: 'ھەپ.'
     },
     inputNumber: {
       increment: 'كۆپەيتىش',
diff --git a/src/runtime/locale/uk.ts b/src/runtime/locale/uk.ts
index 71530b6a72..59600f717f 100644
--- a/src/runtime/locale/uk.ts
+++ b/src/runtime/locale/uk.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Попередній рік',
       nextYear: 'Наступний рік',
       prevMonth: 'Попередній місяць',
-      nextMonth: 'Наступний місяць'
+      nextMonth: 'Наступний місяць',
+      week: 'тиждень',
+      weekShort: 'тиж.'
     },
     inputNumber: {
       increment: 'Збільшити',
diff --git a/src/runtime/locale/ur.ts b/src/runtime/locale/ur.ts
index 9c06b052bb..49f8b9a34c 100644
--- a/src/runtime/locale/ur.ts
+++ b/src/runtime/locale/ur.ts
@@ -15,7 +15,9 @@ export default defineLocale<Messages>({
       prevYear: 'پچھلا سال',
       nextYear: 'اگلا سال',
       prevMonth: 'پچھلا مہینہ',
-      nextMonth: 'اگلا مہینہ'
+      nextMonth: 'اگلا مہینہ',
+      week: 'ہفتہ',
+      weekShort: 'ہف.'
     },
     inputNumber: {
       increment: 'اضافہ',
diff --git a/src/runtime/locale/uz.ts b/src/runtime/locale/uz.ts
index d13dc3eb1c..9111749627 100644
--- a/src/runtime/locale/uz.ts
+++ b/src/runtime/locale/uz.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Oldingi yil',
       nextYear: 'Keyingi yil',
       prevMonth: 'Oldingi oy',
-      nextMonth: 'Keyingi oy'
+      nextMonth: 'Keyingi oy',
+      week: 'Hafta',
+      weekShort: 'Haf.'
     },
     inputNumber: {
       increment: 'Qoʻshish',
diff --git a/src/runtime/locale/vi.ts b/src/runtime/locale/vi.ts
index 62b770b164..b3a5e6f84e 100644
--- a/src/runtime/locale/vi.ts
+++ b/src/runtime/locale/vi.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: 'Năm trước',
       nextYear: 'Năm sau',
       prevMonth: 'Tháng trước',
-      nextMonth: 'Tháng sau'
+      nextMonth: 'Tháng sau',
+      week: 'tuần',
+      weekShort: 'tuần'
     },
     inputNumber: {
       increment: 'Tăng',
diff --git a/src/runtime/locale/zh_cn.ts b/src/runtime/locale/zh_cn.ts
index a521e1d28f..f1f343d004 100644
--- a/src/runtime/locale/zh_cn.ts
+++ b/src/runtime/locale/zh_cn.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: '去年',
       nextYear: '明年',
       prevMonth: '上个月',
-      nextMonth: '下个月'
+      nextMonth: '下个月',
+      week: '周',
+      weekShort: '周'
     },
     inputNumber: {
       increment: '增加',
diff --git a/src/runtime/locale/zh_tw.ts b/src/runtime/locale/zh_tw.ts
index 2ebc83e4ee..e6fc0c491d 100644
--- a/src/runtime/locale/zh_tw.ts
+++ b/src/runtime/locale/zh_tw.ts
@@ -14,7 +14,9 @@ export default defineLocale<Messages>({
       prevYear: '去年',
       nextYear: '明年',
       prevMonth: '上個月',
-      nextMonth: '下個月'
+      nextMonth: '下個月',
+      week: '週',
+      weekShort: '週'
     },
     inputNumber: {
       increment: '增加',
diff --git a/src/runtime/types/locale.ts b/src/runtime/types/locale.ts
index 9ad8c1dc8b..0c4d5596d7 100644
--- a/src/runtime/types/locale.ts
+++ b/src/runtime/types/locale.ts
@@ -9,6 +9,8 @@ export type Messages = {
     nextYear: string
     prevMonth: string
     nextMonth: string
+    week: string
+    weekShort: string
   }
   inputNumber: {
     increment: string

From cea9ca0ec066594415e6e1e57f2a58e599d580f7 Mon Sep 17 00:00:00 2001
From: J-michalek <jaku.michalek@gmail.com>
Date: Wed, 3 Sep 2025 19:32:34 +0200
Subject: [PATCH 3/4] up

---
 src/runtime/components/Calendar.vue | 25 ++-----------------------
 1 file changed, 2 insertions(+), 23 deletions(-)

diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 0d9fce147c..94d1df08d4 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -1,33 +1,12 @@
 <script lang="ts">
 import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootProps, RangeCalendarRootEmits, DateRange, CalendarCellTriggerProps } from 'reka-ui'
-import { getDaysBetween } from 'reka-ui/date'
-import { CalendarDate, getDayOfWeek } from '@internationalized/date'
-import type { DateValue, DayOfWeek } from '@internationalized/date'
+import { getWeekNumber } from 'reka-ui/date'
+import type { DateValue } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/calendar'
 import type { ButtonProps } from '../types'
 import type { ComponentConfig } from '../types/utils'
 
-// TODO: Remove this and use the function that reka-ui provides - not released yet.
-export function getWeekNumber(date: DateValue, locale: string = 'en-US', firstDayOfWeek?: DayOfWeek): number {
-  const firstDayOfYear = new CalendarDate(date.year, 1, 1)
-
-  const firstDayOfYearWeekday = getDayOfWeek(firstDayOfYear, locale, firstDayOfWeek)
-
-  const firstWeekStart = firstDayOfYear.subtract({ days: firstDayOfYearWeekday })
-
-  // If date is before the first week start It belongs to the last week of the previous year
-  if (date.compare(firstWeekStart) < 0) {
-    const prevYearDate = new CalendarDate(date.year - 1, 12, 31)
-    return getWeekNumber(prevYearDate, locale, firstDayOfWeek)
-  }
-
-  const days = getDaysBetween(firstWeekStart, date)
-
-  // Week number is days divided by 7 plus 1
-  return Math.floor(days.length / 7) + 1
-}
-
 type Calendar = ComponentConfig<typeof theme, AppConfig, 'calendar'>
 
 type CalendarDefaultValue<R extends boolean = false, M extends boolean = false> = R extends true

From 5c987b7297221980a440e57b73076536c19c6512 Mon Sep 17 00:00:00 2001
From: J-michalek <jaku.michalek@gmail.com>
Date: Wed, 3 Sep 2025 19:42:12 +0200
Subject: [PATCH 4/4] up

---
 test/components/Calendar.spec.ts              |   2 +-
 .../__snapshots__/Calendar-vue.spec.ts.snap   | 185 ++++++++++++++++++
 .../__snapshots__/Calendar.spec.ts.snap       | 185 ++++++++++++++++++
 3 files changed, 371 insertions(+), 1 deletion(-)

diff --git a/test/components/Calendar.spec.ts b/test/components/Calendar.spec.ts
index bd52b75b95..b1a596d1f4 100644
--- a/test/components/Calendar.spec.ts
+++ b/test/components/Calendar.spec.ts
@@ -33,10 +33,10 @@ describe('Calendar', () => {
     ['with nextMonth', { props: { nextMonth: { size: 'lg', color: 'primary' } } }],
     ['with prevYear', { props: { prevYear: { size: 'lg', color: 'primary' } } }],
     ['with prevMonth', { props: { prevMonth: { size: 'lg', color: 'primary' } } }],
+    ['with weekNumbers', { props: { weekNumbers: true } }],
     ['without fixedWeeks', { props: { fixedWeeks: false } }],
     ['without monthControls', { props: { monthControls: false } }],
     ['without yearControls', { props: { yearControls: false } }],
-    ['without weekNumbers', { props: { weekNumbers: true } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
     ['with color neutral', { props: { color: 'neutral' } }],
     ['with as', { props: { as: 'section' } }],
diff --git a/test/components/__snapshots__/Calendar-vue.spec.ts.snap b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
index 493248ac3f..883409a192 100644
--- a/test/components/__snapshots__/Calendar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
@@ -4785,6 +4785,191 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
 </div>"
 `;
 
+exports[`Calendar > renders with weekNumbers correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" weeknumbers="true">
+  <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>
+      <!--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>
+      <!--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>
+      <!--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>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-8">
+          <th aria-label="week" class="rounded-md text-muted text-xs">wk</th>
+          <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>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">52</td>
+          <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">1</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">2</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">3</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">4</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">5</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <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>"
+`;
+
 exports[`Calendar > renders with weekStartsOn correctly 1`] = `
 "<div role="application" 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>
diff --git a/test/components/__snapshots__/Calendar.spec.ts.snap b/test/components/__snapshots__/Calendar.spec.ts.snap
index 48afc19e56..d5a89bd9d1 100644
--- a/test/components/__snapshots__/Calendar.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar.spec.ts.snap
@@ -4785,6 +4785,191 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
 </div>"
 `;
 
+exports[`Calendar > renders with weekNumbers correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" weeknumbers="true">
+  <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>
+      <!--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>
+      <!--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>
+      <!--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>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-8">
+          <th aria-label="week" class="rounded-md text-muted text-xs">wk</th>
+          <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>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">52</td>
+          <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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">1</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">2</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">3</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">4</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid place-items-center grid-cols-8">
+          <td role="gridcell" class="relative text-center text-muted text-xs">5</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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">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-[selected]:text-inverted data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary data-[selected]:bg-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20 size-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <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>"
+`;
+
 exports[`Calendar > renders with weekStartsOn correctly 1`] = `
 "<div role="application" 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>