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..94d1df08d4 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootProps, RangeCalendarRootEmits, DateRange, CalendarCellTriggerProps } from 'reka-ui'
+import { getWeekNumber } from 'reka-ui/date'
 import type { DateValue } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/calendar'
@@ -90,6 +91,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 +137,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 +189,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 +209,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/runtime/locale/ar.ts b/src/runtime/locale/ar.ts
index a9bffe77f1..45600a3780 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 e894fe2d0d..d86aefbfce 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 4495e2928c..3409dc43ca 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 7da61cdf38..cc7b56aa2a 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 ae58431bcf..f6d1b437ce 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 77b9b27060..13bde958b1 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 011cac8c6a..1889547843 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 cfbeed683a..89fb94efb8 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 680785399b..d4c48d3e96 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 d4810e7e43..54292e2834 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 928ee9e15e..3c45e06efe 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 6b6e4883f0..54bcb564bb 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 958bb7b6d4..46ca759f37 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 48f8cd0030..061a1af0ee 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 62374a9fcd..3cdded993c 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 4a9a217348..a5ca7ed169 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 53a4928431..fa55acc766 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 10f68073ce..eeea42ec8f 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 fcd7658030..84aef8eb48 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 d74215eabc..c3ab126cc7 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 e0d01bbb5f..503bc701a8 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 4ce211d50c..30a9d1f9df 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 3874b35ae0..837d7a8a09 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 b3a738d39a..90a2717fa8 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 9c7c52c333..e8d7f4df3a 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 850db00738..31a27dcded 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 fdf5e51ba2..80e0cc0bd8 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 7ea63fd630..2579b7703a 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 07daa2230c..f3263e6792 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 83e2973ebe..dd49b97998 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 ebe362efe9..cbf6a27fc4 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 4245155125..d7d42b618f 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 629c1e8164..4851fd7b8c 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 0993bcb7b5..f453e2068c 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 75f8ead786..874e72b3f0 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 0dc71644c3..787f1f7318 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 9dc95cbb0b..e032975595 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 2509db59a5..1ac6259162 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 59dcfa9810..aebf4ddf3f 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 d8ed55fbd0..a8108d29d4 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 96f409b9a8..7eec061871 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 65e6ec758d..2fa3f5cd18 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 e87d40db47..c68f3ff2ee 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 ec485c68ee..fc8bef6d97 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 97e78ccebc..6f81516275 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 13d859b572..33029ded52 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 2e0d18d42c..71816d7e96 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 b3fadb7cb1..de21f0ee76 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 a87eb3adff..551881fc94 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 55d767b388..abf6fde09a 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 a03ec88008..acdf1a74fc 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 4d6388e766..3901c201e0 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
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..b1a596d1f4 100644
--- a/test/components/Calendar.spec.ts
+++ b/test/components/Calendar.spec.ts
@@ -33,6 +33,7 @@ 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 } }],
diff --git a/test/components/__snapshots__/Calendar-vue.spec.ts.snap b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
index 3059b337ac..883409a192 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,192 @@ 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>
+          <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 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>
@@ -4624,6 +4991,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 +5003,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 +5027,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 +5051,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 +5075,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 +5099,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 +5123,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 +5176,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 +5188,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 +5212,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 +5236,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 +5260,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 +5284,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 +5308,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 +5361,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 +5373,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 +5397,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 +5421,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 +5445,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 +5469,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 +5518,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 +5530,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 +5554,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 +5578,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 +5602,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 +5626,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 +5650,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 +5884,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 +5896,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 +5920,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 +5944,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 +5968,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 +5992,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 +6016,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..d5a89bd9d1 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,192 @@ 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>
+          <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 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>
@@ -4624,6 +4991,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 +5003,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 +5027,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 +5051,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 +5075,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 +5099,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 +5123,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 +5176,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 +5188,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 +5212,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 +5236,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 +5260,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 +5284,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 +5308,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 +5361,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 +5373,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 +5397,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 +5421,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 +5445,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 +5469,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 +5518,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 +5530,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 +5554,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 +5578,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 +5602,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 +5626,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 +5650,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 +5884,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 +5896,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 +5920,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 +5944,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 +5968,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 +5992,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 +6016,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>