diff --git a/docs/app/components/content/ComponentCode.vue b/docs/app/components/content/ComponentCode.vue
index c92ab9db49..08746c809e 100644
--- a/docs/app/components/content/ComponentCode.vue
+++ b/docs/app/components/content/ComponentCode.vue
@@ -93,6 +93,8 @@ const options = computed(() => {
           chip: key.toLowerCase().endsWith('color') ? { color: variant } : undefined
         }))
 
+    // TODO: process "undefined | Date | DateRange", https://github.com/nuxt/ui/issues/2651
+
     return {
       name: key,
       label: key,
diff --git a/docs/app/components/content/examples/calendar/CalendarDisabledDatesExample.vue b/docs/app/components/content/examples/calendar/CalendarDisabledDatesExample.vue
new file mode 100644
index 0000000000..78e4774c77
--- /dev/null
+++ b/docs/app/components/content/examples/calendar/CalendarDisabledDatesExample.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { Matcher } from '#ui/components/Calendar.vue'
+
+const modelValue = ref({
+  start: new Date('2023-09-08'),
+  end: new Date('2023-09-09')
+})
+
+const isDateDisabled: Matcher = (date) => {
+  return date.day >= 10 && date.day <= 16
+}
+</script>
+
+<template>
+  <UCalendar v-model="modelValue" :is-date-disabled="isDateDisabled" range />
+</template>
diff --git a/docs/app/components/content/examples/calendar/CalendarEventsExample.vue b/docs/app/components/content/examples/calendar/CalendarEventsExample.vue
new file mode 100644
index 0000000000..23ee1a6a51
--- /dev/null
+++ b/docs/app/components/content/examples/calendar/CalendarEventsExample.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const modelValue = ref(new Date('2023-09-08'))
+
+function getColorByDate(date: Date) {
+  const isWeekend = date.getDay() % 6 == 0
+  const isDayMeeting = date.getDay() % 3 == 0
+
+  if (isWeekend) {
+    return undefined
+  }
+
+  if (isDayMeeting) {
+    return 'warning'
+  }
+
+  return 'info'
+}
+</script>
+
+<template>
+  <UCalendar v-model="modelValue">
+    <template #day="{ day }">
+      <UChip :color="getColorByDate(day.toDate(''))">
+        {{ day.day }}
+      </UChip>
+    </template>
+  </UCalendar>
+</template>
diff --git a/docs/app/components/content/examples/calendar/CalendarMinMaxDatesExample.vue b/docs/app/components/content/examples/calendar/CalendarMinMaxDatesExample.vue
new file mode 100644
index 0000000000..ff985e0a7f
--- /dev/null
+++ b/docs/app/components/content/examples/calendar/CalendarMinMaxDatesExample.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const minDate = ref(new Date('2023-09-01'))
+const maxDate = ref(new Date('2023-09-30'))
+const modelValue = ref({
+  start: new Date('2023-09-01'),
+  end: new Date('2023-09-07')
+})
+</script>
+
+<template>
+  <UCalendar v-model="modelValue" :min-value="minDate" :max-value="maxDate" range />
+</template>
diff --git a/docs/app/components/content/examples/calendar/CalendarUnavailableDatesExample.vue b/docs/app/components/content/examples/calendar/CalendarUnavailableDatesExample.vue
new file mode 100644
index 0000000000..21a41bad95
--- /dev/null
+++ b/docs/app/components/content/examples/calendar/CalendarUnavailableDatesExample.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { Matcher } from '#ui/components/Calendar.vue'
+
+const modelValue = ref({
+  start: new Date('2023-09-08'),
+  end: new Date('2023-09-09')
+})
+
+const isDateUnavailable: Matcher = (date) => {
+  return date.day >= 10 && date.day <= 16
+}
+</script>
+
+<template>
+  <UCalendar v-model="modelValue" :is-date-unavailable="isDateUnavailable" range />
+</template>
diff --git a/docs/content/3.components/calendar.md b/docs/content/3.components/calendar.md
new file mode 100644
index 0000000000..d2d786abbe
--- /dev/null
+++ b/docs/content/3.components/calendar.md
@@ -0,0 +1,138 @@
+---
+title: Calendar
+description: A calendar to select a date.
+links: 
+  - label: Calendar
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/calendar.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Calendar.vue
+navigation.badge: New
+---
+
+## Usage
+
+Use the `v-model` directive to control the selected date.
+
+::component-code
+---
+---
+::
+
+### Range
+
+Use the `range` prop to select a range of dates.
+
+::component-code
+---
+ignore:
+  - range
+props:
+  range: true
+---
+::
+
+### Color
+
+Use the `color` prop to change the color of the calendar.
+
+::component-code
+---
+props:
+  color: neutral
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the calendar.
+
+::component-code
+---
+props:
+  size: md
+---
+::
+
+### Year Controls
+
+Use the `year-controls` prop to show the year controls.
+
+::component-code
+---
+props:
+  yearControls: true
+---
+::
+
+### Fixed Weeks
+
+Use the `fixedWeeks` prop to display the calendar with fixed weeks.
+
+::component-code
+---
+props:
+  fixedWeeks: true
+---
+::
+
+## Examples
+
+### Events Calendar
+
+Add a different color to each day.
+
+::component-example
+---
+name: 'calendar-events-example'
+---
+::
+
+### Disabled Dates
+
+Mark the interval between `10` and `16` as disabled
+
+::component-example
+---
+name: 'calendar-disabled-dates-example'
+---
+::
+
+### Unavailable Dates
+
+Mark the interval between `10` and `16` as unavailable
+
+::component-example
+---
+name: 'calendar-unavailable-dates-example'
+---
+::
+
+### Min/Max Dates
+
+Limit the dates between `2023-09-01` and `2023-09-30`
+
+::component-example
+---
+name: 'calendar-min-max-dates-example'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme
diff --git a/package.json b/package.json
index b5f8b7a487..84a47d398d 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
   },
   "dependencies": {
     "@iconify/vue": "^4.1.2",
+    "@internationalized/date": "^3.5.6",
     "@internationalized/number": "^3.5.4",
     "@nuxt/devtools-kit": "^1.6.0",
     "@nuxt/fonts": "^0.10.2",
diff --git a/playground/app/app.vue b/playground/app/app.vue
index 2780f323a9..b11bfc7454 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -26,6 +26,7 @@ const components = [
   'button',
   'button-group',
   'card',
+  'calendar',
   'carousel',
   'checkbox',
   'chip',
diff --git a/playground/app/pages/components/calendar.vue b/playground/app/pages/components/calendar.vue
new file mode 100644
index 0000000000..a026bffd60
--- /dev/null
+++ b/playground/app/pages/components/calendar.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const singleValue = ref(new Date('2023-09-01'))
+const multipleValue = ref({
+  start: new Date('2023-09-01'),
+  end: new Date('2023-09-07')
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex justify-center gap-2">
+      <UCalendar v-model="singleValue" />
+    </div>
+    <div class="flex justify-center gap-2">
+      <UCalendar v-model="multipleValue" range />
+    </div>
+  </div>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5597376adc..6e1526828f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@iconify/vue':
         specifier: ^4.1.2
         version: 4.1.2(vue@3.5.12(typescript@5.6.3))
+      '@internationalized/date':
+        specifier: ^3.5.6
+        version: 3.5.6
       '@internationalized/number':
         specifier: ^3.5.4
         version: 3.5.4
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
new file mode 100644
index 0000000000..d952f853d7
--- /dev/null
+++ b/src/runtime/components/Calendar.vue
@@ -0,0 +1,200 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { CalendarRootProps, CalendarCellTriggerProps } from 'radix-vue'
+import type { DateValue } from '@internationalized/date'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/calendar'
+import type { DateRange, DateRangeRadix } from '../types/date'
+
+export type { Matcher } from 'radix-vue/date'
+
+const appConfig = _appConfig as AppConfig & { ui: { calendar: Partial<typeof theme> } }
+
+const calendar = tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })
+
+type CalendarVariants = VariantProps<typeof calendar>
+
+type ModelValue<T extends boolean> = (T extends true ? DateRange : Date) | undefined
+
+export interface CalendarProps<T extends boolean> extends Pick<CalendarRootProps, 'numberOfMonths' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'disabled' | 'readonly' | 'initialFocus' | 'isDateDisabled' | 'isDateUnavailable'> {
+  /**
+   * The color of the calendar
+   */
+  color?: CalendarVariants['color']
+  /**
+   * The size of the calendar
+   */
+  size?: CalendarVariants['size']
+  /**
+   * Is this a range calendar
+   */
+  range?: T
+  /**
+   * Show year controls
+   */
+  yearControls?: boolean
+  /**
+   * The maximum date that can be selected
+   */
+  maxValue?: Date
+  /**
+   * The minimum date that can be selected
+   */
+  minValue?: Date
+  class?: any
+  ui?: Partial<typeof calendar.slots>
+}
+
+export interface CalendarSlots {
+  'heading': (props: { value: string }) => any
+  'day': (props: Pick<CalendarCellTriggerProps, 'day'>) => any
+  'week-day': (props: { day: string }) => any
+}
+</script>
+
+<script setup lang="ts" generic="T extends boolean">
+import { toRef, computed } from 'vue'
+import { Calendar as SingleCalendar, RangeCalendar } from 'radix-vue/namespaced'
+import { objectOmit } from '@vueuse/core'
+import UButton from './Button.vue'
+import { useLocale } from '../composables/useLocale'
+import { toRangeDate, toRangeZonedDateTime, toZonedDateTime } from '../utils/date'
+
+const props = withDefaults(defineProps<CalendarProps<T>>(), {
+  fixedWeeks: true,
+  yearControls: true
+})
+
+// This is a hack due to generic boolean casting (see https://github.com/nuxt/ui/issues/2541)
+const range = toRef(() => typeof props.range === 'string' ? true : props.range)
+const modelValue = defineModel<ModelValue<T>>(undefined)
+defineSlots<CalendarSlots>()
+
+const { code: locale, dir, t } = useLocale()
+
+function isRange(value: DateRangeRadix | DateValue | undefined): value is DateRangeRadix
+function isRange(value: ModelValue<boolean>): value is ModelValue<true>
+function isRange(value: ModelValue<boolean> | DateRangeRadix | DateValue | undefined) {
+  return !!range.value
+}
+
+const calendarValue = computed({
+  get() {
+    const value = modelValue.value
+
+    if (!value) {
+      return undefined
+    }
+
+    return isRange(value) ? toRangeZonedDateTime(value) : toZonedDateTime(value)
+  },
+  set(value) {
+    if (!value) {
+      modelValue.value = value
+      return
+    }
+
+    modelValue.value = (isRange(value) ? toRangeDate(value) : value.toDate()) as ModelValue<T>
+  }
+})
+
+const ui = computed(() => calendar({
+  color: props.color,
+  size: props.size
+}))
+
+function paginateYear(date: DateValue, sign: -1 | 1) {
+  if (sign === -1) {
+    return date.subtract({ years: 1 })
+  }
+
+  return date.add({ years: 1 })
+}
+
+const Calendar = computed(() => range.value ? RangeCalendar : SingleCalendar)
+
+const calendarProps = computed(() => {
+  return {
+    ...objectOmit(props, ['color', 'size', 'range', 'yearControls', 'class', 'ui', 'modelValue' as any]),
+    locale: locale.value,
+    dir: dir.value,
+    minValue: toZonedDateTime(props.minValue),
+    maxValue: toZonedDateTime(props.maxValue)
+  }
+})
+</script>
+
+<template>
+  <Calendar.Root
+    v-slot="{ weekDays, grid }"
+    v-model="calendarValue as DateRangeRadix & DateValue"
+    v-bind="calendarProps"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+  >
+    <Calendar.Header :class="ui.header({ class: props.ui?.header })">
+      <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
+        <UButton :icon="appConfig.ui.icons.chevronDoubleLeft" :size="props.size" color="neutral" variant="ghost" />
+      </Calendar.Prev>
+      <Calendar.Prev :aria-label="t('calendar.prevMonth')" as-child>
+        <UButton :icon="appConfig.ui.icons.chevronLeft" :size="props.size" color="neutral" variant="ghost" />
+      </Calendar.Prev>
+      <Calendar.Heading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })">
+        <slot name="heading" :value="headingValue">
+          {{ headingValue }}
+        </slot>
+      </Calendar.Heading>
+      <Calendar.Next :aria-label="t('calendar.nextMonth')" as-child>
+        <UButton :icon="appConfig.ui.icons.chevronRight" :size="props.size" color="neutral" variant="ghost" />
+      </Calendar.Next>
+      <Calendar.Next v-if="props.yearControls" :next-page="(date: DateValue) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
+        <UButton :icon="appConfig.ui.icons.chevronDoubleRight" :size="props.size" color="neutral" variant="ghost" />
+      </Calendar.Next>
+    </Calendar.Header>
+    <div :class="ui.body({ class: props.ui?.body })">
+      <Calendar.Grid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        :class="ui.grid({ class: props.ui?.grid })"
+      >
+        <Calendar.GridHead>
+          <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
+            <Calendar.HeadCell
+              v-for="day in weekDays"
+              :key="day"
+              :class="ui.headCell({ class: props.ui?.headCell })"
+            >
+              <slot name="week-day" :day="day">
+                {{ day }}
+              </slot>
+            </Calendar.HeadCell>
+          </Calendar.GridRow>
+        </Calendar.GridHead>
+        <Calendar.GridBody :class="ui.gridBody({ class: props.ui?.gridBody })">
+          <Calendar.GridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+            :class="ui.gridRow({ class: props.ui?.gridRow })"
+          >
+            <Calendar.Cell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+              :class="ui.cell({ class: props.ui?.cell })"
+            >
+              <Calendar.CellTrigger
+                :day="weekDate"
+                :month="month.value"
+                :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
+              >
+                <slot name="day" :day="weekDate">
+                  {{ weekDate.day }}
+                </slot>
+              </Calendar.CellTrigger>
+            </Calendar.Cell>
+          </Calendar.GridRow>
+        </Calendar.GridBody>
+      </Calendar.Grid>
+    </div>
+  </Calendar.Root>
+</template>
diff --git a/src/runtime/locale/ar.ts b/src/runtime/locale/ar.ts
index c1fb6ed5a8..6b86aee2d0 100644
--- a/src/runtime/locale/ar.ts
+++ b/src/runtime/locale/ar.ts
@@ -10,6 +10,12 @@ export default defineLocale({
       noData: 'لا توجد بيانات',
       create: 'إنشاء "{label}"'
     },
+    calendar: {
+      prevYear: 'السنة السابقة',
+      nextYear: 'السنة المقبلة',
+      prevMonth: 'الشهر السابق',
+      nextMonth: 'الشهر المقبل'
+    },
     inputNumber: {
       increment: 'زيادة',
       decrement: 'تقليل'
diff --git a/src/runtime/locale/cs.ts b/src/runtime/locale/cs.ts
index b9296d33fd..ab1da24f66 100644
--- a/src/runtime/locale/cs.ts
+++ b/src/runtime/locale/cs.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Žádná data',
       create: 'Vytvořit "{label}"'
     },
+    calendar: {
+      prevYear: 'Předchozí rok',
+      nextYear: 'Další rok',
+      prevMonth: 'Předchozí měsíc',
+      nextMonth: 'Další měsíc'
+    },
     inputNumber: {
       increment: 'Zvýšit',
       decrement: 'Snížit'
diff --git a/src/runtime/locale/de.ts b/src/runtime/locale/de.ts
index a04604852c..05c4f6b297 100644
--- a/src/runtime/locale/de.ts
+++ b/src/runtime/locale/de.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Keine Daten',
       create: 'Erstellen "{label}"'
     },
+    calendar: {
+      prevYear: 'Vorheriges Jahr',
+      nextYear: 'Nächstes Jahr',
+      prevMonth: 'Vorheriger Monat',
+      nextMonth: 'Nächster Monat'
+    },
     inputNumber: {
       increment: 'Erhöhen',
       decrement: 'Verringern'
diff --git a/src/runtime/locale/en.ts b/src/runtime/locale/en.ts
index 4be5a9c824..74e669b5ce 100644
--- a/src/runtime/locale/en.ts
+++ b/src/runtime/locale/en.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'No data',
       create: 'Create "{label}"'
     },
+    calendar: {
+      prevYear: 'Previous year',
+      nextYear: 'Next year',
+      prevMonth: 'Previous month',
+      nextMonth: 'Next month'
+    },
     inputNumber: {
       increment: 'Increment',
       decrement: 'Decrement'
diff --git a/src/runtime/locale/es.ts b/src/runtime/locale/es.ts
index f3579f4e8d..bd24c608ac 100644
--- a/src/runtime/locale/es.ts
+++ b/src/runtime/locale/es.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Sin datos',
       create: 'Crear "{label}"'
     },
+    calendar: {
+      prevYear: 'A o anterior',
+      nextYear: 'A o siguiente',
+      prevMonth: 'Mes anterior',
+      nextMonth: 'Mes siguiente'
+    },
     inputNumber: {
       increment: 'Incremento',
       decrement: 'Decremento'
diff --git a/src/runtime/locale/fr.ts b/src/runtime/locale/fr.ts
index 19086796f1..111c863b91 100644
--- a/src/runtime/locale/fr.ts
+++ b/src/runtime/locale/fr.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Aucune donnée',
       create: 'Créer "{label}"'
     },
+    calendar: {
+      prevYear: 'Année précédente',
+      nextYear: 'Année suivante',
+      prevMonth: 'Mois précédent',
+      nextMonth: 'Mois suivant'
+    },
     inputNumber: {
       increment: 'Augmenter',
       decrement: 'Diminuer'
diff --git a/src/runtime/locale/it.ts b/src/runtime/locale/it.ts
index cd0eb32b05..c7f70a3444 100644
--- a/src/runtime/locale/it.ts
+++ b/src/runtime/locale/it.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Nessun dato',
       create: 'Crea "{label}"'
     },
+    calendar: {
+      prevYear: 'Anno precedente',
+      nextYear: 'Anno successivo',
+      prevMonth: 'Mese precedente',
+      nextMonth: 'Mese successivo'
+    },
     inputNumber: {
       increment: 'Aumenta',
       decrement: 'Diminuisci'
diff --git a/src/runtime/locale/ru.ts b/src/runtime/locale/ru.ts
index 85135db5f3..f3d98d849e 100644
--- a/src/runtime/locale/ru.ts
+++ b/src/runtime/locale/ru.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Нет данных',
       create: 'Создать "{label}"'
     },
+    calendar: {
+      prevYear: 'Предыдущий год',
+      nextYear: 'Следующий год',
+      prevMonth: 'Предыдущий месяц',
+      nextMonth: 'Следующий месяц'
+    },
     inputNumber: {
       increment: 'Увеличить',
       decrement: 'Уменьшить'
diff --git a/src/runtime/locale/zh_hans.ts b/src/runtime/locale/zh_hans.ts
index c829c64164..0a9c2213ae 100644
--- a/src/runtime/locale/zh_hans.ts
+++ b/src/runtime/locale/zh_hans.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: '没有数据',
       create: '创建 "{label}"'
     },
+    calendar: {
+      prevYear: '去年',
+      nextYear: '明年',
+      prevMonth: '上个月',
+      nextMonth: '下个月'
+    },
     inputNumber: {
       increment: '增加',
       decrement: '减少'
diff --git a/src/runtime/locale/zh_hant.ts b/src/runtime/locale/zh_hant.ts
index 1671051c28..556d237a6e 100644
--- a/src/runtime/locale/zh_hant.ts
+++ b/src/runtime/locale/zh_hant.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: '沒有資料',
       create: '創建 "{label}"'
     },
+    calendar: {
+      prevYear: '去年',
+      nextYear: '明年',
+      prevMonth: '上个月',
+      nextMonth: '下个月'
+    },
     inputNumber: {
       increment: '增加',
       decrement: '减少'
diff --git a/src/runtime/types/date.ts b/src/runtime/types/date.ts
new file mode 100644
index 0000000000..f9e495296c
--- /dev/null
+++ b/src/runtime/types/date.ts
@@ -0,0 +1,22 @@
+import type { DateValue, ZonedDateTime } from '@internationalized/date'
+
+export interface DateRange {
+  /**
+   * The start of the range
+   */
+  start: Date | undefined
+  /**
+   * The end of the range
+   */
+  end: Date | undefined
+}
+
+export interface ZonedDateRange {
+  start: ZonedDateTime | undefined
+  end: ZonedDateTime | undefined
+}
+
+export type DateRangeRadix = {
+  start: DateValue | undefined
+  end: DateValue | undefined
+}
diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index 072e3e8db8..aa067d6b7d 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -6,6 +6,7 @@ export * from '../components/AvatarGroup.vue'
 export * from '../components/Badge.vue'
 export * from '../components/Breadcrumb.vue'
 export * from '../components/Button.vue'
+export * from '../components/Calendar.vue'
 export * from '../components/Card.vue'
 export * from '../components/Carousel.vue'
 export * from '../components/Checkbox.vue'
diff --git a/src/runtime/types/locale.ts b/src/runtime/types/locale.ts
index b5b3ed02bb..4148874b97 100644
--- a/src/runtime/types/locale.ts
+++ b/src/runtime/types/locale.ts
@@ -4,6 +4,12 @@ export type Messages = {
     noData: string
     create: string
   }
+  calendar: {
+    prevYear: string
+    nextYear: string
+    prevMonth: string
+    nextMonth: string
+  }
   inputNumber: {
     increment: string
     decrement: string
diff --git a/src/runtime/utils/date.ts b/src/runtime/utils/date.ts
new file mode 100644
index 0000000000..f013d3813f
--- /dev/null
+++ b/src/runtime/utils/date.ts
@@ -0,0 +1,21 @@
+import { fromDate, getLocalTimeZone } from '@internationalized/date'
+import type { ZonedDateTime } from '@internationalized/date'
+import type { DateRange, ZonedDateRange } from '../types/date'
+
+export function toZonedDateTime(date?: Date | undefined): undefined | ZonedDateTime {
+  return date ? fromDate(date, getLocalTimeZone()) : undefined
+}
+
+export function toRangeZonedDateTime(range: DateRange): ZonedDateRange {
+  return {
+    start: range.start ? toZonedDateTime(range.start) : undefined,
+    end: range.end ? toZonedDateTime(range.end) : undefined
+  }
+}
+
+export function toRangeDate(range: ZonedDateRange): DateRange {
+  return {
+    start: range.start?.toDate(),
+    end: range.end?.toDate()
+  }
+}
diff --git a/src/theme/calendar.ts b/src/theme/calendar.ts
new file mode 100644
index 0000000000..5887b26962
--- /dev/null
+++ b/src/theme/calendar.ts
@@ -0,0 +1,67 @@
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => {
+  return {
+    slots: {
+      root: 'rounded-[calc(var(--ui-radius)*1.5)]',
+      header: 'flex items-center justify-between',
+      body: 'flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0',
+      heading: 'text-center text-sm font-medium truncate',
+      grid: 'w-full border-collapse select-none space-y-1',
+      gridRow: 'grid grid-cols-7',
+      gridWeekDaysRow: 'mb-1 grid w-full grid-cols-7',
+      gridBody: 'grid',
+      headCell: 'rounded-md text-xs',
+      cell: 'relative text-center text-sm',
+      cellTrigger: ['m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through', options.theme.transitions && 'transition-[color,opacity] duration-200']
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
+          headCell: `text-[var(--ui-${color})]`,
+          cellTrigger: `focus-visible:ring-[var(--ui-${color})] data-[selected]:!bg-[var(--ui-${color})] data-[today]:text-[var(--ui-${color})] data-[highlighted]:bg-[var(--ui-${color})]/20 hover:bg-[var(--ui-${color})]/20`
+        }])),
+        neutral: {
+          headCell: 'text-[var(--ui-bg-inverted)]',
+          cellTrigger: 'focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:!bg-[var(--ui-bg-inverted)] data-[today]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:bg-[var(--ui-bg-inverted)]/10'
+        }
+      },
+      size: {
+        xs: {
+          heading: 'text-xs',
+          cell: 'text-xs',
+          headCell: 'text-[10px]',
+          cellTrigger: 'w-7 h-7',
+          body: 'space-y-2 pt-2'
+        },
+        sm: {
+          heading: 'text-xs',
+          cell: 'text-xs',
+          cellTrigger: 'w-7 h-7'
+        },
+        md: {
+          cellTrigger: 'w-8 h-8'
+        },
+        lg: {
+          heading: 'text-md',
+          headCell: 'text-md',
+          cellTrigger: 'w-9 h-9 text-md'
+        },
+        xl: {
+          heading: 'text-lg',
+          headCell: 'text-lg',
+          cellTrigger: 'w-10 h-10 text-lg'
+        }
+      }
+    },
+    compoundVariants: [
+      ...(options.theme.colors || []).map((color: string) => ({
+        color
+      }))
+    ],
+    defaultVariants: {
+      size: 'md',
+      color: 'primary'
+    }
+  }
+}
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 90d2af7156..7bbbdf938b 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -6,6 +6,7 @@ export { default as badge } from './badge'
 export { default as breadcrumb } from './breadcrumb'
 export { default as button } from './button'
 export { default as buttonGroup } from './button-group'
+export { default as calendar } from './calendar'
 export { default as card } from './card'
 export { default as carousel } from './carousel'
 export { default as checkbox } from './checkbox'
diff --git a/test/components/Calendar.spec.ts b/test/components/Calendar.spec.ts
new file mode 100644
index 0000000000..b4a9d01887
--- /dev/null
+++ b/test/components/Calendar.spec.ts
@@ -0,0 +1,58 @@
+import { describe, it, expect, vi, afterAll, test } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import Calendar, { type CalendarProps, type CalendarSlots } from '../../src/runtime/components/Calendar.vue'
+import ComponentRender from '../component-render'
+import theme from '#build/ui/calendar'
+
+describe('Calendar', () => {
+  const sizes = Object.keys(theme.variants.size) as any
+  const date = new Date('2025-01-01')
+
+  vi.setSystemTime(date)
+
+  afterAll(() => {
+    vi.useRealTimers()
+  })
+
+  it.each([
+    // Props
+    ['with class', { props: { class: 'custom-class' } }],
+    ['with ui', { props: { ui: { root: 'w-96' } } }],
+    ['with range', { props: { range: true } }],
+    ['with disabled', { props: { range: true } }],
+    ['with readonly', { props: { range: true } }],
+    ['with is date disabled', { props: { isDateDisabled: () => true } }],
+    ['with is date unavailable', { props: { isDateUnavailable: () => true } }],
+    ['with week starts on', { props: { weekStartsOn: 1 } }],
+    ['with weekday format', { props: { weekdayFormat: 'short' } }],
+    ['with number of months', { props: { numberOfMonths: 2 } }],
+    ['without fixed weeks', { props: { fixedWeeks: false } }],
+    ['without year controls', { props: { yearControls: false } }],
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
+    // Slots
+    ['with heading slot', { slots: { heading: () => 'Heading' } }],
+    ['with day slot', { slots: { day: ({ day }: Parameters<CalendarSlots['day']>[0]) => day.day } }],
+    ['with week-day slot', { slots: { 'week-day': ({ day }: Parameters<CalendarSlots['week-day']>[0]) => day } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CalendarProps<false>, slots?: Partial<CalendarSlots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, Calendar)
+    expect(html).toMatchSnapshot()
+  })
+
+  describe('emits', () => {
+    test('update:modelValue event single', async () => {
+      const wrapper = await mountSuspended(Calendar)
+      const date = new Date('2025-01-01')
+
+      await wrapper.setValue(date)
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[date]] })
+    })
+
+    test('update:modelValue event range', async () => {
+      const wrapper = await mountSuspended(Calendar, { props: { range: true } })
+      const date = [new Date('2025-01-01'), new Date('2025-01-02')]
+
+      await wrapper.setValue(date)
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[date]] })
+    })
+  })
+})
diff --git a/test/components/__snapshots__/Calendar-vue.spec.ts.snap b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
new file mode 100644
index 0000000000..ab8e457040
--- /dev/null
+++ b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
@@ -0,0 +1,3687 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Calendar > renders with class correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)] custom-class">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 day slot correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 disabled correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-29" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-30" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-31" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-01" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-02" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-03" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-04" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-05" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-06" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-07" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-08" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with heading slot correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">Heading</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 is date disabled correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 is date unavailable correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-unavailable="" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 number of months correctly 1`] = `
+"<div role="application" aria-label="Event Date, January - February 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January - February 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-02-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-02-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-02-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-02-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-02-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-02-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-01" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-02-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-02-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-02-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-02-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-02-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-02-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-02-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-02-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-10" month="2025-02-01" role="button" aria-label="Monday, February 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-11" month="2025-02-01" role="button" aria-label="Tuesday, February 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-12" month="2025-02-01" role="button" aria-label="Wednesday, February 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-13" month="2025-02-01" role="button" aria-label="Thursday, February 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-14" month="2025-02-01" role="button" aria-label="Friday, February 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-15" month="2025-02-01" role="button" aria-label="Saturday, February 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-02-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-17" month="2025-02-01" role="button" aria-label="Monday, February 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-18" month="2025-02-01" role="button" aria-label="Tuesday, February 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-19" month="2025-02-01" role="button" aria-label="Wednesday, February 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-20" month="2025-02-01" role="button" aria-label="Thursday, February 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-21" month="2025-02-01" role="button" aria-label="Friday, February 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-22" month="2025-02-01" role="button" aria-label="Saturday, February 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-02-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-24" month="2025-02-01" role="button" aria-label="Monday, February 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-25" month="2025-02-01" role="button" aria-label="Tuesday, February 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-26" month="2025-02-01" role="button" aria-label="Wednesday, February 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-27" month="2025-02-01" role="button" aria-label="Thursday, February 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-28" month="2025-02-01" role="button" aria-label="Friday, February 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-01" month="2025-02-01" role="button" aria-label="Saturday, March 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-03" month="2025-02-01" role="button" aria-label="Monday, March 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-04" month="2025-02-01" role="button" aria-label="Tuesday, March 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-05" month="2025-02-01" role="button" aria-label="Wednesday, March 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-06" month="2025-02-01" role="button" aria-label="Thursday, March 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-07" month="2025-02-01" role="button" aria-label="Friday, March 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-08" month="2025-02-01" role="button" aria-label="Saturday, March 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 - February 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with range correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-29" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-30" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-31" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-01" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-02" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-03" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-04" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-05" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-06" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-07" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-08" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with readonly correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-29" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-30" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-31" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-01" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-02" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-03" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-04" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-05" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-06" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-07" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-08" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with size lg correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate text-md">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-[var(--ui-primary)] text-md">S</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">M</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">W</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">F</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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 size md correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 size sm correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate text-xs">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">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 size xl correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate text-lg">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">S</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">M</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">W</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">F</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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 size xs correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate text-xs">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col sm:flex-row sm:space-x-4 sm:space-y-0 space-y-2 pt-2">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">S</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">M</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">W</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">F</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">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 ui correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)] w-96">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 week starts on correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-09" month="2025-01-01" role="button" aria-label="Sunday, February 9, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-09" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</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 week-day slot correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 weekday format correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Sun</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Mon</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Tue</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Wed</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Thu</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Fri</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Sat</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 fixed weeks correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</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 year controls correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between">
+    <!--v-if--><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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>"
+`;
diff --git a/test/components/__snapshots__/Calendar.spec.ts.snap b/test/components/__snapshots__/Calendar.spec.ts.snap
new file mode 100644
index 0000000000..92b01d3984
--- /dev/null
+++ b/test/components/__snapshots__/Calendar.spec.ts.snap
@@ -0,0 +1,3687 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Calendar > renders with class correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)] custom-class">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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 text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 day slot correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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 text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 disabled correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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 text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-29" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-30" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-31" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-01" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-02" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-03" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-04" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-05" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-06" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-07" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-08" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with heading slot correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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 text-sm font-medium truncate">Heading</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 is date disabled correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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 text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 is date unavailable correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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 text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-unavailable="" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 number of months correctly 1`] = `
+"<div role="application" aria-label="Event Date, January - February 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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 text-sm font-medium truncate">January - February 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-02-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-02-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-02-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-02-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-02-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-02-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-01" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-02-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-02-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-02-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-02-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-02-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-02-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-02-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-02-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-10" month="2025-02-01" role="button" aria-label="Monday, February 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-11" month="2025-02-01" role="button" aria-label="Tuesday, February 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-12" month="2025-02-01" role="button" aria-label="Wednesday, February 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-13" month="2025-02-01" role="button" aria-label="Thursday, February 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-14" month="2025-02-01" role="button" aria-label="Friday, February 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-15" month="2025-02-01" role="button" aria-label="Saturday, February 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-02-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-17" month="2025-02-01" role="button" aria-label="Monday, February 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-18" month="2025-02-01" role="button" aria-label="Tuesday, February 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-19" month="2025-02-01" role="button" aria-label="Wednesday, February 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-20" month="2025-02-01" role="button" aria-label="Thursday, February 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-21" month="2025-02-01" role="button" aria-label="Friday, February 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-22" month="2025-02-01" role="button" aria-label="Saturday, February 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-02-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-24" month="2025-02-01" role="button" aria-label="Monday, February 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-25" month="2025-02-01" role="button" aria-label="Tuesday, February 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-26" month="2025-02-01" role="button" aria-label="Wednesday, February 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-27" month="2025-02-01" role="button" aria-label="Thursday, February 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-28" month="2025-02-01" role="button" aria-label="Friday, February 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-01" month="2025-02-01" role="button" aria-label="Saturday, March 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-03" month="2025-02-01" role="button" aria-label="Monday, March 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-04" month="2025-02-01" role="button" aria-label="Tuesday, March 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-05" month="2025-02-01" role="button" aria-label="Wednesday, March 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-06" month="2025-02-01" role="button" aria-label="Thursday, March 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-07" month="2025-02-01" role="button" aria-label="Friday, March 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-08" month="2025-02-01" role="button" aria-label="Saturday, March 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 - February 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with range correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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 text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-29" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-30" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-31" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-01" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-02" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-03" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-04" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-05" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-06" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-07" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-08" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with readonly correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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 text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-29" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-30" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-31" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-01" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-02" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-03" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-04" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-05" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-06" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-07" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-08" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with size lg correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate text-md">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-[var(--ui-primary)] text-md">S</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">M</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">W</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">F</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">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 size md correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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 text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 size sm correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate text-xs">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true"></span>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">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 size xl correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-6" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate text-lg">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true"></span>
+      <!--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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">S</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">M</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">W</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">F</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">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 size xs correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate text-xs">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col sm:flex-row sm:space-x-4 sm:space-y-0 space-y-2 pt-2">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">S</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">M</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">W</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">F</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">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 ui correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)] w-96">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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 text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 week starts on correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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 text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-09" month="2025-01-01" role="button" aria-label="Sunday, February 9, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-09" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</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 week-day slot correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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 text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 weekday format correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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 text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Sun</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Mon</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Tue</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Wed</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Thu</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Fri</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Sat</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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 fixed weeks correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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 text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</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 year controls correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between">
+    <!--v-if--><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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 text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent 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>
+    <!--v-if-->
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <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-radix-vue-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 outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-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>"
+`;