diff --git a/docs/app/components/content/examples/calendar/CalendarMonthPickerExample.vue b/docs/app/components/content/examples/calendar/CalendarMonthPickerExample.vue
new file mode 100644
index 0000000000..0d71a682b4
--- /dev/null
+++ b/docs/app/components/content/examples/calendar/CalendarMonthPickerExample.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { CalendarDate } from '@internationalized/date'
+import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
+
+const modelValue = shallowRef<CalendarDate>()
+const formatter = new DateFormatter('en-US', {
+  month: 'long',
+  year: 'numeric'
+})
+
+const label = computed(() => {
+  if (!modelValue.value) {
+    return 'Select month'
+  }
+
+  return formatter.format(modelValue.value.toDate(getLocalTimeZone()))
+})
+</script>
+
+<template>
+  <UPopover>
+    <UButton variant="outline" color="neutral" trailing-icon="i-lucide-calendar">
+      {{ label }}
+    </UButton>
+
+    <template #content>
+      <UCalendar v-model="modelValue" type="month" />
+    </template>
+  </UPopover>
+</template>
diff --git a/docs/content/docs/2.components/calendar.md b/docs/content/docs/2.components/calendar.md
index cb26a7b2fd..6f4dad2a00 100644
--- a/docs/content/docs/2.components/calendar.md
+++ b/docs/content/docs/2.components/calendar.md
@@ -209,6 +209,65 @@ props:
 ---
 ::
 
+### Type
+
+Use the `type` prop to change the calendar picker type. Defaults to `date`.
+
+Set `type="month"` for a month-only picker.
+
+::component-code
+---
+cast:
+  modelValue: DateValue
+ignore:
+  - modelValue
+  - type
+external:
+  - modelValue
+props:
+  type: month
+  modelValue: [2022, 3, 1]
+---
+::
+
+Set `type="year"` for a year-only picker.
+
+::component-code
+---
+cast:
+  modelValue: DateValue
+ignore:
+  - modelValue
+  - type
+external:
+  - modelValue
+props:
+  type: year
+  modelValue: [2022, 1, 1]
+---
+::
+
+### Default View
+
+Use the `default-view` prop to set the initial view. Defaults to `day` when `type="date"`.
+
+::component-code
+---
+cast:
+  defaultValue: DateValue
+ignore:
+  - defaultView
+  - defaultValue
+external:
+  - defaultValue
+props:
+  defaultView: month
+  defaultValue: [2022, 2, 3]
+---
+::
+
+When using `type="date"`, the heading buttons let users switch between day, month, and year views.
+
 ## Examples
 
 ### With chip events
@@ -275,6 +334,16 @@ name: 'calendar-external-controls-example'
 ---
 ::
 
+### As a month picker
+
+Use `type="month"` with a [Popover](/docs/components/popover) to create a month picker.
+
+::component-example
+---
+name: 'calendar-month-picker-example'
+---
+::
+
 ### As a date picker
 
 Use a [Button](/docs/components/button) and a [Popover](/docs/components/popover) component to create a date picker.
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 19bc43fd84..3caee979fd 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -3,6 +3,7 @@ import type { CalendarRootProps, CalendarRootEmits, RangeCalendarRootProps, Rang
 import { getWeekNumber } from 'reka-ui/date'
 import type { VNode } from 'vue'
 import type { DateValue } from '@internationalized/date'
+import { getLocalTimeZone, today } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/calendar'
 import type { ButtonProps, IconProps, LinkPropsKeys } from '../types'
@@ -10,6 +11,9 @@ import type { ComponentConfig } from '../types/tv'
 
 type Calendar = ComponentConfig<typeof theme, AppConfig, 'calendar'>
 
+export type CalendarType = 'date' | 'month' | 'year'
+export type CalendarView = 'day' | 'month' | 'year'
+
 type CalendarDefaultValue<R extends boolean = false, M extends boolean = false> = R extends true
   ? DateRange
   : M extends true
@@ -30,6 +34,18 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * The type of calendar picker.
+   * @defaultValue 'date'
+   */
+  type?: CalendarType
+  /** The controlled view state. Use with `@update:view` for controlled mode. */
+  view?: CalendarView
+  /**
+   * The default view when uncontrolled.
+   * @defaultValue Depends on `type` prop
+   */
+  defaultView?: CalendarView
   /**
    * The icon to use for the next year control.
    * @defaultValue appConfig.ui.icons.chevronDoubleRight
@@ -103,19 +119,37 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
 
 export interface CalendarEmits<R extends boolean = false, M extends boolean = false> extends Omit<CalendarRootEmits & RangeCalendarRootEmits, 'update:modelValue'> {
   'update:modelValue': [value: CalendarModelValue<R, M>]
+  'update:placeholder': [date: DateValue]
+  'update:view': [view: CalendarView]
 }
 
 export interface CalendarSlots {
-  'heading'?: (props: { value: string }) => VNode[]
-  'day'?: (props: Pick<CalendarCellTriggerProps, 'day'>) => VNode[]
-  'week-day'?: (props: { day: string }) => VNode[]
+  'heading'?(props: {
+    value: string
+    date: DateValue
+    view: CalendarView
+    setMonth: (date: DateValue) => void
+    setYear: (date: DateValue) => void
+    setView: (view: CalendarView) => void
+  }): VNode[]
+  'day'?(props: Pick<CalendarCellTriggerProps, 'day'>): VNode[]
+  'week-day'?(props: { day: string }): VNode[]
+  'month-cell'?(props: { month: DateValue, selected: boolean, disabled: boolean }): VNode[]
+  'year-cell'?(props: { year: DateValue, selected: boolean, disabled: boolean }): VNode[]
 }
 </script>
 
 <script setup lang="ts" generic="R extends boolean, M extends boolean">
-import { computed } from 'vue'
-import { useForwardPropsEmits } from 'reka-ui'
-import { Calendar as SingleCalendar, RangeCalendar } from 'reka-ui/namespaced'
+import { computed, ref, shallowRef, watch } from 'vue'
+import { useDateFormatter, useForwardPropsEmits } from 'reka-ui'
+import {
+  Calendar as SingleCalendar,
+  MonthPicker,
+  MonthRangePicker,
+  RangeCalendar,
+  YearPicker,
+  YearRangePicker
+} from 'reka-ui/namespaced'
 import { reactiveOmit } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useComponentUI } from '../composables/useComponentUI'
@@ -124,6 +158,7 @@ import { tv } from '../utils/tv'
 import UButton from './Button.vue'
 
 const props = withDefaults(defineProps<CalendarProps<R, M>>(), {
+  type: 'date',
   fixedWeeks: true,
   monthControls: true,
   yearControls: true
@@ -131,73 +166,351 @@ const props = withDefaults(defineProps<CalendarProps<R, M>>(), {
 const emits = defineEmits<CalendarEmits<R, M>>()
 defineSlots<CalendarSlots>()
 
-const { dir, t, locale } = useLocale()
+const { dir, t, code } = useLocale()
 const appConfig = useAppConfig() as Calendar['AppConfig']
 const uiProp = useComponentUI('calendar', props)
+const formatter = shallowRef(useDateFormatter(code.value))
+
+watch(() => code.value, (value) => {
+  if (formatter.value.getLocale() !== value) {
+    formatter.value.setLocale(value)
+  }
+})
 
-const rootProps = useForwardPropsEmits(reactiveOmit(props, 'range', 'modelValue', 'defaultValue', 'color', 'variant', 'size', 'monthControls', 'yearControls', 'class', 'ui'), emits)
+function getDefaultView(type: CalendarType = props.type) {
+  if (props.defaultView) {
+    return props.defaultView
+  }
 
-const nextYearIcon = computed(() => props.nextYearIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight))
-const nextMonthIcon = computed(() => props.nextMonthIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight))
-const prevYearIcon = computed(() => props.prevYearIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleRight : appConfig.ui.icons.chevronDoubleLeft))
-const prevMonthIcon = computed(() => props.prevMonthIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft))
+  if (type === 'month') {
+    return 'month'
+  }
+
+  if (type === 'year') {
+    return 'year'
+  }
+
+  return 'day'
+}
+
+const internalView = ref<CalendarView>(getDefaultView())
+
+watch(() => [props.type, props.view] as const, ([type, view], [previousType]) => {
+  if (view !== undefined) {
+    internalView.value = view
+    return
+  }
+
+  if (type !== previousType) {
+    internalView.value = getDefaultView(type as CalendarType)
+  }
+})
+
+const view = computed<CalendarView>({
+  get() {
+    if (props.type === 'month') {
+      return 'month'
+    }
+
+    if (props.type === 'year') {
+      return 'year'
+    }
+
+    return props.view ?? internalView.value
+  },
+  set(value) {
+    if (props.type !== 'date') {
+      return
+    }
+
+    internalView.value = value
+    emits('update:view', value)
+  }
+})
 
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })({
   color: props.color,
   size: props.size,
   variant: props.variant,
-  weekNumbers: props.weekNumbers
+  weekNumbers: props.weekNumbers,
+  type: view.value
 }))
 
+function resolveDateValue(value: DateValue | DateValue[] | DateRange | null | undefined) {
+  if (Array.isArray(value)) {
+    return value[0]
+  }
+
+  if (!value) {
+    return
+  }
+
+  if (isDateRange(value)) {
+    return value.start ?? value.end ?? undefined
+  }
+
+  return value
+}
+
+function isDateRange(value: DateValue | DateRange) {
+  return 'start' in value || 'end' in value
+}
+
+const localPlaceholder = shallowRef<DateValue | undefined>(props.placeholder)
+
+watch(() => props.placeholder, (value) => {
+  localPlaceholder.value = value
+})
+
+const pickerPlaceholder = computed(() => {
+  return localPlaceholder.value
+    ?? resolveDateValue(props.modelValue as DateValue | DateValue[] | DateRange | null | undefined)
+    ?? resolveDateValue(props.defaultValue as DateValue | DateValue[] | DateRange | null | undefined)
+    ?? today(getLocalTimeZone())
+})
+
+function syncPlaceholder(value: DateValue) {
+  localPlaceholder.value = value
+}
+
+function updatePlaceholder(value: DateValue) {
+  syncPlaceholder(value)
+  emits('update:placeholder', value)
+}
+
+function setMonth(value: DateValue) {
+  updatePlaceholder(value)
+}
+
+function setYear(value: DateValue, base = pickerPlaceholder.value) {
+  updatePlaceholder(base.set({ year: value.year }))
+}
+
+function setView(value: CalendarView) {
+  view.value = value
+}
+
 function paginateYear(date: DateValue, sign: -1 | 1) {
-  if (sign === -1) {
-    return date.subtract({ years: 1 })
+  return sign === -1 ? date.subtract({ years: 1 }) : date.add({ years: 1 })
+}
+
+const dayRootProps = useForwardPropsEmits(
+  reactiveOmit(props, 'type', 'view', 'defaultView', 'range', 'modelValue', 'defaultValue', 'placeholder', 'color', 'variant', 'size', 'monthControls', 'yearControls', 'class', 'ui'),
+  emits
+)
+
+const calendarRootProps = computed(() => ({
+  ...dayRootProps.value,
+  'onUpdate:placeholder': updatePlaceholder
+}))
+
+const nextYearIcon = computed(() => props.nextYearIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleLeft : appConfig.ui.icons.chevronDoubleRight))
+const nextMonthIcon = computed(() => props.nextMonthIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronLeft : appConfig.ui.icons.chevronRight))
+const prevYearIcon = computed(() => props.prevYearIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronDoubleRight : appConfig.ui.icons.chevronDoubleLeft))
+const prevMonthIcon = computed(() => props.prevMonthIcon || (dir.value === 'rtl' ? appConfig.ui.icons.chevronRight : appConfig.ui.icons.chevronLeft))
+
+const prevMonthLabel = computed(() => t('calendar.prevMonth'))
+const nextMonthLabel = computed(() => t('calendar.nextMonth'))
+const prevYearLabel = computed(() => t('calendar.prevYear'))
+const nextYearLabel = computed(() => t('calendar.nextYear'))
+const prevDecadeLabel = computed(() => t('calendar.prevDecade'))
+const nextDecadeLabel = computed(() => t('calendar.nextDecade'))
+const switchToMonthsLabel = computed(() => t('calendar.switchToMonths'))
+const switchToYearsLabel = computed(() => t('calendar.switchToYears'))
+
+function formatDatePart(date: DateValue, options: Intl.DateTimeFormatOptions, fallback: number) {
+  try {
+    return formatter.value.custom(date.toDate(getLocalTimeZone()), options)
+  } catch {
+    return String(fallback)
+  }
+}
+
+const formatMonthLabel = (date: DateValue) => formatDatePart(date, { month: 'long' }, date.month)
+const formatYearLabel = (date: DateValue) => formatDatePart(date, { year: 'numeric' }, date.year)
+
+function getHeadingLabel(date: DateValue, value: Extract<CalendarView, 'month' | 'year'>) {
+  const formatted = value === 'month' ? formatMonthLabel(date) : formatYearLabel(date)
+  const actionLabel = value === 'month' ? switchToMonthsLabel.value : switchToYearsLabel.value
+  return `${formatted}, ${actionLabel}`
+}
+
+function getHeadingButtonClass(active: boolean) {
+  return [
+    'rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented',
+    active ? 'cursor-default' : 'cursor-pointer hover:bg-elevated/50'
+  ]
+}
+
+function emitModelValue(value: DateValue | DateRange) {
+  emits('update:modelValue', value as CalendarModelValue<R, M>)
+}
+
+const DayCalendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
+const isMonthView = computed(() => view.value === 'month')
+const isNavigationMonthView = computed(() => props.type === 'date' && isMonthView.value)
+const isNavigationYearView = computed(() => props.type === 'date' && view.value === 'year')
+const isStandalonePicker = computed(() => props.type !== 'date')
+const showMonthNavigation = computed(() => props.type === 'date' && view.value === 'day' && props.monthControls)
+
+function onMonthUpdate(value: DateValue | DateRange) {
+  if (isNavigationMonthView.value) {
+    const nextValue = resolveDateValue(value) ?? pickerPlaceholder.value
+    setMonth(nextValue)
+    setView('day')
+    return
+  }
+
+  emitModelValue(value)
+}
+
+function onYearUpdate(value: DateValue | DateRange) {
+  if (isNavigationYearView.value) {
+    const nextValue = resolveDateValue(value) ?? pickerPlaceholder.value
+    setYear(nextValue, pickerPlaceholder.value)
+    setView('month')
+    return
   }
 
-  return date.add({ years: 1 })
+  emitModelValue(value)
 }
 
-const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
+function createPickerConfig(kind: 'month' | 'year') {
+  const ns = kind === 'month'
+    ? { single: MonthPicker, range: MonthRangePicker }
+    : { single: YearPicker, range: YearRangePicker }
+  const source = props.range ? ns.range : ns.single
+  return {
+    kind,
+    root: source.Root, header: source.Header, heading: source.Heading,
+    grid: source.Grid, gridBody: source.GridBody, gridRow: source.GridRow,
+    cell: source.Cell, cellTrigger: source.CellTrigger,
+    prev: source.Prev, next: source.Next,
+    slotName: `${kind}-cell`,
+    itemProp: kind,
+    labelProp: `${kind}Value`,
+    previousLabel: kind === 'month' ? prevYearLabel.value : prevDecadeLabel.value,
+    nextLabel: kind === 'month' ? nextYearLabel.value : nextDecadeLabel.value,
+    onUpdate: kind === 'month' ? onMonthUpdate : onYearUpdate
+  } as const
+}
+
+const monthPicker = computed(() => createPickerConfig('month'))
+const yearPicker = computed(() => createPickerConfig('year'))
+
+const picker = computed<any>(() => isMonthView.value ? monthPicker.value : yearPicker.value)
+const pickerSlotNames = computed(() => {
+  if (picker.value.kind === 'month') {
+    return {
+      grid: 'monthGrid',
+      row: 'monthGridRow',
+      cell: 'monthCell',
+      trigger: 'monthCellTrigger'
+    } as const
+  }
+
+  return {
+    grid: 'yearGrid',
+    row: 'yearGridRow',
+    cell: 'yearCell',
+    trigger: 'yearCellTrigger'
+  } as const
+})
+const pickerDefaultValue = computed(() => props.defaultValue as DateValue | DateRange | undefined)
+const pickerModelValue = computed(() => props.modelValue as DateValue | DateRange | undefined)
+const pickerValueProps = computed<Record<string, any>>(() => isStandalonePicker.value
+  ? {
+      modelValue: pickerModelValue.value,
+      defaultValue: pickerDefaultValue.value
+    }
+  : {})
+const pickerRootProps = computed(() => ({
+  ...calendarRootProps.value,
+  ...pickerValueProps.value,
+  'placeholder': pickerPlaceholder.value,
+  'locale': code.value,
+  'dir': dir.value,
+  'onUpdate:modelValue': picker.value.onUpdate,
+  'onUpdate:placeholder': onPickerPlaceholderUpdate
+}))
+
+function onPickerPlaceholderUpdate(value: DateValue) {
+  if (isStandalonePicker.value) {
+    updatePlaceholder(value)
+    return
+  }
+
+  syncPlaceholder(value)
+}
 </script>
 
 <template>
-  <Calendar.Root
-    v-slot="{ weekDays, grid }"
-    v-bind="rootProps"
+  <DayCalendar.Root
+    v-if="view === 'day'"
+    v-slot="{ weekDays, grid, date }"
+    v-bind="calendarRootProps"
     :model-value="(modelValue as DateValue | DateValue[])"
     :default-value="(defaultValue as DateValue)"
+    :placeholder="localPlaceholder"
+    :locale="code"
+    :dir="dir"
     data-slot="root"
     :class="ui.root({ class: [uiProp?.root, props.class] })"
   >
-    <Calendar.Header data-slot="header" :class="ui.header({ class: uiProp?.header })">
-      <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
+    <DayCalendar.Header data-slot="header" :class="ui.header({ class: uiProp?.header })">
+      <DayCalendar.Prev v-if="props.yearControls" :prev-page="(value: DateValue) => paginateYear(value, -1)" :aria-label="prevYearLabel" as-child>
         <UButton :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevYear" />
-      </Calendar.Prev>
-      <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
+      </DayCalendar.Prev>
+      <DayCalendar.Prev v-if="showMonthNavigation" :aria-label="prevMonthLabel" as-child>
         <UButton :icon="prevMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevMonth" />
-      </Calendar.Prev>
-      <Calendar.Heading v-slot="{ headingValue }" data-slot="heading" :class="ui.heading({ class: uiProp?.heading })">
-        <slot name="heading" :value="headingValue">
-          {{ headingValue }}
+      </DayCalendar.Prev>
+      <DayCalendar.Heading v-slot="{ headingValue }" data-slot="heading" :class="ui.heading({ class: uiProp?.heading })">
+        <slot
+          name="heading"
+          :value="headingValue"
+          :date="date"
+          :view="view"
+          :set-month="setMonth"
+          :set-year="(value: DateValue) => setYear(value, date)"
+          :set-view="setView"
+        >
+          <div class="inline-flex items-center gap-1">
+            <button
+              type="button"
+              :class="getHeadingButtonClass(false)"
+              :aria-label="getHeadingLabel(date, 'month')"
+              @click="setView('month')"
+            >
+              {{ formatMonthLabel(date) }}
+            </button>
+            <button
+              type="button"
+              :class="getHeadingButtonClass(false)"
+              :aria-label="getHeadingLabel(date, 'year')"
+              @click="setView('year')"
+            >
+              {{ formatYearLabel(date) }}
+            </button>
+          </div>
         </slot>
-      </Calendar.Heading>
-      <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child>
+      </DayCalendar.Heading>
+      <DayCalendar.Next v-if="showMonthNavigation" :aria-label="nextMonthLabel" as-child>
         <UButton :icon="nextMonthIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextMonth" />
-      </Calendar.Next>
-      <Calendar.Next v-if="props.yearControls" :next-page="(date: DateValue) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
+      </DayCalendar.Next>
+      <DayCalendar.Next v-if="props.yearControls" :next-page="(value: DateValue) => paginateYear(value, 1)" :aria-label="nextYearLabel" as-child>
         <UButton :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextYear" />
-      </Calendar.Next>
-    </Calendar.Header>
+      </DayCalendar.Next>
+    </DayCalendar.Header>
     <div data-slot="body" :class="ui.body({ class: uiProp?.body })">
-      <Calendar.Grid
+      <DayCalendar.Grid
         v-for="month in grid"
         :key="month.value.toString()"
         data-slot="grid"
         :class="ui.grid({ class: uiProp?.grid })"
       >
-        <Calendar.GridHead>
-          <Calendar.GridRow data-slot="gridWeekDaysRow" :class="ui.gridWeekDaysRow({ class: uiProp?.gridWeekDaysRow })">
-            <Calendar.HeadCell
+        <DayCalendar.GridHead>
+          <DayCalendar.GridRow data-slot="gridWeekDaysRow" :class="ui.gridWeekDaysRow({ class: uiProp?.gridWeekDaysRow })">
+            <DayCalendar.HeadCell
               v-for="day in weekDays"
               :key="day"
               data-slot="headCell"
@@ -206,11 +519,11 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
               <slot name="week-day" :day="day">
                 {{ day }}
               </slot>
-            </Calendar.HeadCell>
-          </Calendar.GridRow>
-        </Calendar.GridHead>
-        <Calendar.GridBody data-slot="gridBody" :class="ui.gridBody({ class: uiProp?.gridBody })">
-          <Calendar.GridRow
+            </DayCalendar.HeadCell>
+          </DayCalendar.GridRow>
+        </DayCalendar.GridHead>
+        <DayCalendar.GridBody data-slot="gridBody" :class="ui.gridBody({ class: uiProp?.gridBody })">
+          <DayCalendar.GridRow
             v-for="(weekDates, index) in month.rows"
             :key="`weekDate-${index}`"
             data-slot="gridRow"
@@ -222,16 +535,16 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
               data-slot="cellWeek"
               :class="ui.cellWeek({ class: uiProp?.cellWeek })"
             >
-              {{ getWeekNumber(weekDates[0], locale.code) }}
+              {{ getWeekNumber(weekDates[0], code) }}
             </td>
-            <Calendar.Cell
+            <DayCalendar.Cell
               v-for="weekDate in weekDates"
               :key="weekDate.toString()"
               :date="weekDate"
               data-slot="cell"
               :class="ui.cell({ class: uiProp?.cell })"
             >
-              <Calendar.CellTrigger
+              <DayCalendar.CellTrigger
                 :day="weekDate"
                 :month="month.value"
                 data-slot="cellTrigger"
@@ -240,11 +553,116 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
                 <slot name="day" :day="weekDate">
                   {{ weekDate.day }}
                 </slot>
-              </Calendar.CellTrigger>
-            </Calendar.Cell>
-          </Calendar.GridRow>
-        </Calendar.GridBody>
-      </Calendar.Grid>
+              </DayCalendar.CellTrigger>
+            </DayCalendar.Cell>
+          </DayCalendar.GridRow>
+        </DayCalendar.GridBody>
+      </DayCalendar.Grid>
     </div>
-  </Calendar.Root>
+  </DayCalendar.Root>
+
+  <component
+    :is="picker.root"
+    v-else
+    v-slot="{ grid, date }"
+    v-bind="pickerRootProps"
+    data-slot="root"
+    :class="ui.root({ class: ['inline-flex w-fit flex-col gap-4', uiProp?.root, props.class] })"
+  >
+    <component
+      :is="picker.header"
+      data-slot="header"
+      :class="ui.header({ class: ['grid w-full grid-cols-[auto_1fr_1fr_auto] items-center gap-1', uiProp?.header] })"
+    >
+      <component :is="picker.prev" v-if="props.yearControls" :aria-label="picker.previousLabel" as-child>
+        <UButton :icon="prevYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.prevYear" />
+      </component>
+      <component
+        :is="picker.heading"
+        v-slot="{ headingValue }"
+        data-slot="heading"
+        :class="ui.heading({ class: ['col-span-2 overflow-visible whitespace-nowrap text-center', uiProp?.heading] })"
+      >
+        <slot
+          name="heading"
+          :value="headingValue"
+          :date="date"
+          :view="view"
+          :set-month="setMonth"
+          :set-year="(value: DateValue) => setYear(value, date)"
+          :set-view="setView"
+        >
+          <div v-if="props.type === 'date'" class="inline-flex items-center gap-1">
+            <button
+              type="button"
+              :class="getHeadingButtonClass(view === 'month')"
+              :aria-label="getHeadingLabel(date, 'month')"
+              :disabled="view === 'month'"
+              @click="setView('month')"
+            >
+              {{ formatMonthLabel(date) }}
+            </button>
+            <button
+              type="button"
+              :class="getHeadingButtonClass(view === 'year')"
+              :aria-label="getHeadingLabel(date, 'year')"
+              :disabled="view === 'year'"
+              @click="setView('year')"
+            >
+              {{ formatYearLabel(date) }}
+            </button>
+          </div>
+          <span v-else>
+            {{ headingValue }}
+          </span>
+        </slot>
+      </component>
+      <component :is="picker.next" v-if="props.yearControls" :aria-label="picker.nextLabel" as-child>
+        <UButton :icon="nextYearIcon" :size="props.size" color="neutral" variant="ghost" v-bind="props.nextYear" />
+      </component>
+    </component>
+
+    <component
+      :is="picker.grid"
+      as="div"
+      :data-slot="pickerSlotNames.grid"
+      :class="ui.grid({ class: uiProp?.grid })"
+    >
+      <component :is="picker.gridBody" as="div">
+        <component
+          :is="picker.gridRow"
+          v-for="(row, rowIndex) in grid.rows"
+          :key="rowIndex"
+          as="div"
+          :data-slot="pickerSlotNames.row"
+          :class="ui.gridRow({ class: uiProp?.gridRow })"
+        >
+          <component
+            :is="picker.cell"
+            v-for="cellDate in row"
+            :key="cellDate.toString()"
+            as="div"
+            :date="cellDate"
+            :data-slot="pickerSlotNames.cell"
+            :class="ui.cell({ class: uiProp?.cell })"
+          >
+            <component
+              :is="picker.cellTrigger"
+              v-slot="slotProps"
+              v-bind="{ [picker.itemProp]: cellDate }"
+              :data-slot="pickerSlotNames.trigger"
+              :class="ui.cellTrigger({ class: uiProp?.cellTrigger })"
+            >
+              <slot v-if="picker.kind === 'month'" name="month-cell" :month="cellDate" :selected="slotProps.selected" :disabled="slotProps.disabled">
+                {{ slotProps.monthValue }}
+              </slot>
+              <slot v-else name="year-cell" :year="cellDate" :selected="slotProps.selected" :disabled="slotProps.disabled">
+                {{ slotProps.yearValue }}
+              </slot>
+            </component>
+          </component>
+        </component>
+      </component>
+    </component>
+  </component>
 </template>
diff --git a/src/runtime/locale/en.ts b/src/runtime/locale/en.ts
index 7eced47986..4bd6144b75 100644
--- a/src/runtime/locale/en.ts
+++ b/src/runtime/locale/en.ts
@@ -17,10 +17,14 @@ export default defineLocale<Messages>({
       close: 'Close'
     },
     calendar: {
+      nextDecade: 'Next decade',
       nextMonth: 'Next month',
       nextYear: 'Next year',
+      prevDecade: 'Previous decade',
       prevMonth: 'Previous month',
-      prevYear: 'Previous year'
+      prevYear: 'Previous year',
+      switchToMonths: 'Switch to month view',
+      switchToYears: 'Switch to year view'
     },
     carousel: {
       dots: 'Choose slide to display',
diff --git a/src/runtime/types/locale.ts b/src/runtime/types/locale.ts
index de30698a20..230471924a 100644
--- a/src/runtime/types/locale.ts
+++ b/src/runtime/types/locale.ts
@@ -11,10 +11,14 @@ export type Messages = {
     close: string
   }
   calendar: {
+    nextDecade?: string
     nextMonth: string
     nextYear: string
+    prevDecade?: string
     prevMonth: string
     prevYear: string
+    switchToMonths?: string
+    switchToYears?: string
   }
   carousel: {
     dots: string
diff --git a/src/theme/calendar.ts b/src/theme/calendar.ts
index 1339bb2527..7592bbcd98 100644
--- a/src/theme/calendar.ts
+++ b/src/theme/calendar.ts
@@ -1,19 +1,69 @@
 import type { ModuleOptions } from '../module'
 
+type PickerTriggerVariant = 'solid' | 'outline' | 'soft' | 'subtle'
+type CalendarPanelType = 'day' | 'month' | 'year'
+
+const pickerTriggerVariants = ['solid', 'outline', 'soft', 'subtle'] as const
+
+const triggerSizeClasses = {
+  day: {
+    xs: 'size-7',
+    sm: 'size-7',
+    md: 'size-8',
+    lg: 'size-9 text-md',
+    xl: 'size-10 text-lg'
+  },
+  picker: {
+    xs: 'h-7 px-2 text-xs',
+    sm: 'h-7 px-2 text-xs',
+    md: 'h-8 px-3 text-sm',
+    lg: 'h-9 px-4 text-md',
+    xl: 'h-10 px-5 text-lg'
+  }
+} as const
+
+function getTriggerClass(color: string, variant: PickerTriggerVariant, includeToday: boolean) {
+  const today = includeToday ? ` data-today:not-data-[selected]:text-${color}` : ''
+  switch (variant) {
+    case 'solid':
+      return `data-[selected]:bg-${color} data-[selected]:text-inverted${today} data-[highlighted]:bg-${color}/20 hover:not-data-[selected]:bg-${color}/20`
+    case 'outline':
+      return `data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-${color}/50 data-[selected]:text-${color}${today} data-[highlighted]:bg-${color}/10 hover:not-data-[selected]:bg-${color}/10`
+    case 'soft':
+      return `data-[selected]:bg-${color}/10 data-[selected]:text-${color}${today} data-[highlighted]:bg-${color}/20 hover:not-data-[selected]:bg-${color}/20`
+    case 'subtle':
+      return `data-[selected]:bg-${color}/10 data-[selected]:text-${color} data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-${color}/25${today} data-[highlighted]:bg-${color}/20 hover:not-data-[selected]:bg-${color}/20`
+  }
+}
+
+function getNeutralTriggerClass(variant: PickerTriggerVariant, includeToday: boolean) {
+  const today = includeToday ? ' data-today:not-data-[selected]:text-highlighted' : ''
+  switch (variant) {
+    case 'solid':
+      return `data-[selected]:bg-inverted data-[selected]:text-inverted${today} data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10`
+    case 'outline':
+      return `data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-accented data-[selected]:text-default data-[selected]:bg-default${today} data-[highlighted]:bg-inverted/10 hover:not-data-[selected]:bg-inverted/10`
+    case 'soft':
+      return `data-[selected]:bg-elevated data-[selected]:text-default${today} data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10`
+    case 'subtle':
+      return `data-[selected]:bg-elevated data-[selected]:text-default data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-accented${today} data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10`
+  }
+}
+
 export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: '',
     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 font-medium truncate mx-auto',
-    grid: 'w-full border-collapse select-none space-y-1 focus:outline-none',
-    gridRow: 'grid grid-cols-7 place-items-center',
+    heading: 'mx-auto text-center font-medium',
+    grid: 'w-full select-none space-y-1 focus:outline-none',
+    gridRow: 'grid',
     gridWeekDaysRow: 'mb-1 grid w-full grid-cols-7',
     gridBody: 'grid',
     headCell: 'rounded-md',
     headCellWeek: 'rounded-md text-muted',
     cell: 'relative text-center',
-    cellTrigger: ['m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted', options.theme.transitions && 'transition'],
+    cellTrigger: ['relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted', options.theme.transitions && 'transition'],
     cellWeek: 'relative text-center text-muted'
   },
   variants: {
@@ -33,6 +83,21 @@ export default (options: Required<ModuleOptions>) => ({
       soft: '',
       subtle: ''
     },
+    type: {
+      day: {
+        grid: 'border-collapse',
+        gridRow: 'grid-cols-7 place-items-center',
+        cellTrigger: 'm-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted'
+      },
+      month: {
+        gridRow: 'grid-cols-4 gap-1',
+        cellTrigger: 'w-full rounded-md'
+      },
+      year: {
+        gridRow: 'grid-cols-4 gap-1',
+        cellTrigger: 'w-full rounded-md tabular-nums'
+      }
+    },
     size: {
       xs: {
         heading: 'text-xs',
@@ -40,7 +105,6 @@ export default (options: Required<ModuleOptions>) => ({
         cellWeek: 'text-xs',
         headCell: 'text-[10px]',
         headCellWeek: 'text-[10px]',
-        cellTrigger: 'size-7',
         body: 'space-y-2 pt-2'
       },
       sm: {
@@ -48,89 +112,86 @@ export default (options: Required<ModuleOptions>) => ({
         headCell: 'text-xs',
         headCellWeek: 'text-xs',
         cellWeek: 'text-xs',
-        cell: 'text-xs',
-        cellTrigger: 'size-7'
+        cell: 'text-xs'
       },
       md: {
         heading: 'text-sm',
         headCell: 'text-xs',
         headCellWeek: 'text-xs',
         cellWeek: 'text-xs',
-        cell: 'text-sm',
-        cellTrigger: 'size-8'
+        cell: 'text-sm'
       },
       lg: {
         heading: 'text-md',
         headCell: 'text-md',
-        headCellWeek: 'text-md',
-        cellTrigger: 'size-9 text-md'
+        headCellWeek: 'text-md'
       },
       xl: {
         heading: 'text-lg',
         headCell: 'text-lg',
-        headCellWeek: 'text-lg',
-        cellTrigger: 'size-10 text-lg'
+        headCellWeek: 'text-lg'
       }
     },
     weekNumbers: {
-      true: {
+      true: ''
+    }
+  },
+  compoundVariants: [
+    ...Object.entries(triggerSizeClasses.day).map(([size, cellTrigger]) => ({
+      size,
+      type: 'day' as CalendarPanelType,
+      class: { cellTrigger }
+    })),
+    ...Object.entries(triggerSizeClasses.picker).map(([size, cellTrigger]) => ({
+      size,
+      type: ['month', 'year'] as CalendarPanelType[],
+      class: { cellTrigger }
+    })),
+    {
+      type: 'day',
+      weekNumbers: true,
+      class: {
         gridRow: 'grid-cols-8',
         gridWeekDaysRow: 'grid-cols-8 [&>*:first-child]:col-start-2'
       }
-    }
-  },
-  compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
-    color,
-    variant: 'solid',
-    class: {
-      cellTrigger: `data-[selected]:bg-${color} data-[selected]:text-inverted data-today:not-data-[selected]:text-${color} data-[highlighted]:bg-${color}/20 hover:not-data-[selected]:bg-${color}/20`
-    }
-  })), ...(options.theme.colors || []).map((color: string) => ({
-    color,
-    variant: 'outline',
-    class: {
-      cellTrigger: `data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-${color}/50 data-[selected]:text-${color} data-today:not-data-[selected]:text-${color} data-[highlighted]:bg-${color}/10 hover:not-data-[selected]:bg-${color}/10`
-    }
-  })), ...(options.theme.colors || []).map((color: string) => ({
-    color,
-    variant: 'soft',
-    class: {
-      cellTrigger: `data-[selected]:bg-${color}/10 data-[selected]:text-${color} data-today:not-data-[selected]:text-${color} data-[highlighted]:bg-${color}/20 hover:not-data-[selected]:bg-${color}/20`
-    }
-  })), ...(options.theme.colors || []).map((color: string) => ({
-    color,
-    variant: 'subtle',
-    class: {
-      cellTrigger: `data-[selected]:bg-${color}/10 data-[selected]:text-${color} data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-${color}/25 data-today:not-data-[selected]:text-${color} data-[highlighted]:bg-${color}/20 hover:not-data-[selected]:bg-${color}/20`
-    }
-  })), {
-    color: 'neutral',
-    variant: 'solid',
-    class: {
-      cellTrigger: 'data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10'
-    }
-  }, {
-    color: 'neutral',
-    variant: 'outline',
-    class: {
-      cellTrigger: 'data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-accented data-[selected]:text-default data-[selected]:bg-default data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/10 hover:not-data-[selected]:bg-inverted/10'
-    }
-  }, {
-    color: 'neutral',
-    variant: 'soft',
-    class: {
-      cellTrigger: 'data-[selected]:bg-elevated data-[selected]:text-default data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10'
-    }
-  }, {
-    color: 'neutral',
-    variant: 'subtle',
-    class: {
-      cellTrigger: 'data-[selected]:bg-elevated data-[selected]:text-default data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-accented data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10'
-    }
-  }],
+    },
+    ...(options.theme.colors || []).flatMap((color: string) => pickerTriggerVariants.map(variant => ({
+      color,
+      variant,
+      type: 'day' as CalendarPanelType,
+      class: {
+        cellTrigger: getTriggerClass(color, variant, true)
+      }
+    }))),
+    ...(options.theme.colors || []).flatMap((color: string) => pickerTriggerVariants.map(variant => ({
+      color,
+      variant,
+      type: ['month', 'year'] as CalendarPanelType[],
+      class: {
+        cellTrigger: getTriggerClass(color, variant, false)
+      }
+    }))),
+    ...pickerTriggerVariants.map(variant => ({
+      color: 'neutral',
+      variant,
+      type: 'day' as CalendarPanelType,
+      class: {
+        cellTrigger: getNeutralTriggerClass(variant, true)
+      }
+    })),
+    ...pickerTriggerVariants.map(variant => ({
+      color: 'neutral',
+      variant,
+      type: ['month', 'year'] as CalendarPanelType[],
+      class: {
+        cellTrigger: getNeutralTriggerClass(variant, false)
+      }
+    }))
+  ],
   defaultVariants: {
     size: 'md',
     color: 'primary',
-    variant: 'solid'
+    variant: 'solid',
+    type: 'day'
   }
 })
diff --git a/test/components/Calendar.spec.ts b/test/components/Calendar.spec.ts
index 4862b06030..f7b820cdc1 100644
--- a/test/components/Calendar.spec.ts
+++ b/test/components/Calendar.spec.ts
@@ -1,10 +1,19 @@
-import { describe, it, expect, vi, afterAll, test } from 'vitest'
+import { afterAll, describe, expect, it, test, vi } from 'vitest'
 import { axe } from 'vitest-axe'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import { CalendarDate } from '@internationalized/date'
-import { renderEach } from '../component-render'
+import { ref } from 'vue'
+import type { Locale } from '../../src/runtime/types/locale'
 import Calendar from '../../src/runtime/components/Calendar.vue'
+import type { CalendarSlots } from '../../src/runtime/components/Calendar.vue'
+import { renderEach } from '../component-render'
 import theme from '#build/ui/calendar'
+import en from '../../src/runtime/locale/en'
+import fr from '../../src/runtime/locale/fr'
+
+type HeadingSlotProps = Parameters<NonNullable<CalendarSlots['heading']>>[0]
+type MonthCellSlotProps = Parameters<NonNullable<CalendarSlots['month-cell']>>[0]
+type YearCellSlotProps = Parameters<NonNullable<CalendarSlots['year-cell']>>[0]
 
 describe('Calendar', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -18,7 +27,6 @@ describe('Calendar', () => {
   })
 
   renderEach(Calendar, [
-    // Props
     ['with modelValue', { props: { modelValue: new CalendarDate(2025, 1, 1) } }],
     ['with default value', { props: { defaultValue: new CalendarDate(2025, 1, 1) } }],
     ['with range', { props: { range: true } }],
@@ -46,7 +54,6 @@ describe('Calendar', () => {
     ['with as', { props: { as: 'section' } }],
     ['with class', { props: { class: 'max-w-sm' } }],
     ['with ui', { props: { ui: { header: 'gap-4' } } }],
-    // Slots
     ['with heading slot', { slots: { heading: () => 'Heading' } }],
     ['with day slot', { slots: { day: ({ day }) => day.day } }],
     ['with week-day slot', { slots: { 'week-day': ({ day }) => day } }]
@@ -55,18 +62,18 @@ describe('Calendar', () => {
   describe('emits', () => {
     test('update:modelValue event', async () => {
       const wrapper = await mountSuspended(Calendar)
-      const date = new CalendarDate(2025, 1, 1)
+      const value = new CalendarDate(2025, 1, 1)
 
-      await wrapper.setValue(date)
-      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[date]] })
+      await wrapper.setValue(value)
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[value]] })
     })
 
     test('update:modelValue event range', async () => {
       const wrapper = await mountSuspended(Calendar, { props: { range: true } })
-      const date = { start: new CalendarDate(2025, 1, 1), end: new CalendarDate(2025, 1, 2) }
+      const value = { start: new CalendarDate(2025, 1, 1), end: new CalendarDate(2025, 1, 2) }
 
-      await wrapper.setValue(date)
-      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[date]] })
+      await wrapper.setValue(value)
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[value]] })
     })
   })
 
@@ -82,4 +89,282 @@ describe('Calendar', () => {
 
     expect(await axe(wrapper.element)).toHaveNoViolations()
   })
+
+  describe('type prop', () => {
+    test('type="month" emits update:modelValue on month select', async () => {
+      const wrapper = await mountSuspended(Calendar, {
+        props: {
+          type: 'month',
+          defaultValue: new CalendarDate(2025, 1, 1)
+        }
+      })
+
+      const monthButtons = wrapper.findAll('[data-slot="monthCellTrigger"]')
+      expect(monthButtons).toHaveLength(12)
+
+      await monthButtons[5]!.trigger('click')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted?.[0]?.[0]).toMatchObject({ month: 6 })
+    })
+
+    test('type="year" emits update:modelValue on year select', async () => {
+      const wrapper = await mountSuspended(Calendar, {
+        props: {
+          type: 'year',
+          defaultValue: new CalendarDate(2025, 1, 1)
+        }
+      })
+
+      const yearButtons = wrapper.findAll('[data-slot="yearCellTrigger"]')
+      expect(yearButtons).toHaveLength(12)
+
+      await yearButtons[0]!.trigger('click')
+
+      const emitted = wrapper.emitted('update:modelValue')
+      expect(emitted?.[0]?.[0]).toMatchObject({ year: 2020 })
+    })
+
+    test('placeholder falls back to modelValue before today for month and year pickers', async () => {
+      let monthDate: CalendarDate | null = null
+      let yearDate: CalendarDate | null = null
+
+      await mountSuspended(Calendar, {
+        props: {
+          type: 'month',
+          modelValue: new CalendarDate(2023, 7, 1)
+        },
+        slots: {
+          heading: ({ date }: HeadingSlotProps) => {
+            monthDate = date as CalendarDate
+            return 'heading'
+          }
+        }
+      })
+
+      await mountSuspended(Calendar, {
+        props: {
+          type: 'year',
+          defaultValue: new CalendarDate(2032, 1, 1)
+        },
+        slots: {
+          heading: ({ date }: HeadingSlotProps) => {
+            yearDate = date as CalendarDate
+            return 'heading'
+          }
+        }
+      })
+
+      expect(monthDate).toMatchObject({ year: 2023, month: 7 })
+      expect(yearDate).toMatchObject({ year: 2032 })
+    })
+
+    test('month-cell and year-cell slots receive picker data', async () => {
+      const monthWrapper = await mountSuspended(Calendar, {
+        props: { type: 'month', defaultValue: new CalendarDate(2025, 1, 1) },
+        slots: {
+          'month-cell': ({ month }: MonthCellSlotProps) => `M${month.month}`
+        }
+      })
+
+      const yearWrapper = await mountSuspended(Calendar, {
+        props: { type: 'year', defaultValue: new CalendarDate(2025, 1, 1) },
+        slots: {
+          'year-cell': ({ year }: YearCellSlotProps) => `Y${year.year}`
+        }
+      })
+
+      expect(monthWrapper.text()).toContain('M1')
+      expect(yearWrapper.text()).toContain('Y2020')
+    })
+  })
+
+  describe('view switching', () => {
+    test('defaultView renders month and year panels', async () => {
+      const monthWrapper = await mountSuspended(Calendar, {
+        props: {
+          defaultView: 'month',
+          defaultValue: new CalendarDate(2025, 1, 1)
+        }
+      })
+      const yearWrapper = await mountSuspended(Calendar, {
+        props: {
+          defaultView: 'year',
+          defaultValue: new CalendarDate(2025, 1, 1)
+        }
+      })
+
+      expect(monthWrapper.find('[data-slot="monthGrid"]').exists()).toBe(true)
+      expect(monthWrapper.find('[data-slot="grid"]').exists()).toBe(false)
+      expect(yearWrapper.find('[data-slot="yearGrid"]').exists()).toBe(true)
+      expect(yearWrapper.find('[data-slot="grid"]').exists()).toBe(false)
+    })
+
+    test('clicking the heading switches day -> month -> year', async () => {
+      const wrapper = await mountSuspended(Calendar, {
+        props: { defaultValue: new CalendarDate(2025, 1, 1) }
+      })
+
+      expect(wrapper.find('[data-slot="grid"]').exists()).toBe(true)
+
+      const dayButtons = wrapper.findAll('[data-slot="heading"] button')
+      await dayButtons[0]!.trigger('click')
+
+      expect(wrapper.find('[data-slot="monthGrid"]').exists()).toBe(true)
+
+      const monthButtons = wrapper.findAll('[data-slot="heading"] button')
+      await monthButtons[1]!.trigger('click')
+
+      expect(wrapper.find('[data-slot="yearGrid"]').exists()).toBe(true)
+    })
+
+    test('selecting a month returns to day view and emits update:placeholder once', async () => {
+      const wrapper = await mountSuspended(Calendar, {
+        props: {
+          defaultView: 'month',
+          defaultValue: new CalendarDate(2025, 1, 1)
+        }
+      })
+
+      const monthButtons = wrapper.findAll('[data-slot="monthCellTrigger"]')
+      await monthButtons[5]!.trigger('click')
+
+      expect(wrapper.find('[data-slot="grid"]').exists()).toBe(true)
+
+      const placeholderEvents = wrapper.emitted('update:placeholder') ?? []
+      expect(placeholderEvents).toHaveLength(1)
+      expect(placeholderEvents[0]?.[0]).toMatchObject({ month: 6 })
+    })
+
+    test('selecting a year returns to month view and emits update:placeholder once', async () => {
+      const wrapper = await mountSuspended(Calendar, {
+        props: {
+          defaultView: 'year',
+          defaultValue: new CalendarDate(2025, 1, 1)
+        }
+      })
+
+      const yearButtons = wrapper.findAll('[data-slot="yearCellTrigger"]')
+      await yearButtons[0]!.trigger('click')
+
+      expect(wrapper.find('[data-slot="monthGrid"]').exists()).toBe(true)
+
+      const placeholderEvents = wrapper.emitted('update:placeholder') ?? []
+      expect(placeholderEvents).toHaveLength(1)
+      expect(placeholderEvents[0]?.[0]).toMatchObject({ year: 2020, month: 1 })
+    })
+
+    test('day month navigation emits update:placeholder once per action', async () => {
+      const wrapper = await mountSuspended(Calendar, {
+        props: {
+          defaultValue: new CalendarDate(2025, 1, 1),
+          yearControls: false
+        }
+      })
+
+      await wrapper.find('[aria-label="Next month"]').trigger('click')
+
+      const placeholderEvents = wrapper.emitted('update:placeholder') ?? []
+      expect(placeholderEvents).toHaveLength(1)
+    })
+
+    test('emits update:view while switching views', async () => {
+      const wrapper = await mountSuspended(Calendar, {
+        props: { defaultValue: new CalendarDate(2025, 1, 1) }
+      })
+
+      const headingButtons = wrapper.findAll('[data-slot="heading"] button')
+      await headingButtons[0]!.trigger('click')
+
+      expect(wrapper.emitted('update:view')?.[0]).toEqual(['month'])
+    })
+
+    test('changing defaultView after mount does not reset uncontrolled view', async () => {
+      const wrapper = await mountSuspended(Calendar, {
+        props: { defaultValue: new CalendarDate(2025, 1, 1) }
+      })
+
+      const headingButtons = wrapper.findAll('[data-slot="heading"] button')
+      await headingButtons[0]!.trigger('click')
+      await wrapper.findAll('[data-slot="heading"] button')[1]!.trigger('click')
+
+      expect(wrapper.find('[data-slot="yearGrid"]').exists()).toBe(true)
+
+      await wrapper.setProps({ defaultView: 'month' })
+
+      expect(wrapper.find('[data-slot="yearGrid"]').exists()).toBe(true)
+      expect(wrapper.find('[data-slot="monthGrid"]').exists()).toBe(false)
+    })
+
+    test('type="month" keeps the standalone picker heading static', async () => {
+      const wrapper = await mountSuspended(Calendar, {
+        props: {
+          type: 'month',
+          defaultValue: new CalendarDate(2025, 1, 1)
+        }
+      })
+
+      expect(wrapper.find('[data-slot="monthGrid"]').exists()).toBe(true)
+      expect(wrapper.find('[data-slot="heading"] button').exists()).toBe(false)
+    })
+
+    test('type="month" forwards root props to the picker root', async () => {
+      const wrapper = await mountSuspended(Calendar, {
+        props: {
+          type: 'month',
+          as: 'section',
+          defaultValue: new CalendarDate(2025, 1, 1)
+        }
+      })
+
+      expect(wrapper.find('[data-slot="root"]').element.tagName).toBe('SECTION')
+    })
+  })
+
+  describe('labels', () => {
+    test('uses fallback text for switch aria labels when locale keys are missing', async () => {
+      const wrapper = await mountSuspended(Calendar, {
+        props: { defaultValue: new CalendarDate(2025, 1, 1) }
+      })
+
+      const headingButtons = wrapper.findAll('[data-slot="heading"] button')
+      expect(headingButtons[0]!.attributes('aria-label')).toContain('Switch to month view')
+      expect(headingButtons[1]!.attributes('aria-label')).toContain('Switch to year view')
+    })
+
+    test('updates formatter output when locale changes', async () => {
+      vi.resetModules()
+
+      const { default: AppComponent } = await import('../../src/runtime/components/App.vue')
+      const { default: CalendarComponent } = await import('../../src/runtime/components/Calendar.vue')
+      const locale = ref<Locale<any>>(en)
+      const wrapper = await mountSuspended({
+        components: {
+          UApp: AppComponent,
+          UCalendar: CalendarComponent
+        },
+        setup() {
+          return {
+            locale,
+            CalendarDate
+          }
+        },
+        template: `
+          <UApp :locale="locale">
+            <UCalendar :default-value="new CalendarDate(2025, 1, 1)" />
+          </UApp>
+        `
+      })
+
+      const getMonthLabel = () => wrapper.findAll('[data-slot="heading"] button')[0]!.text()
+
+      expect(getMonthLabel()).toBe('January')
+
+      locale.value = fr as Locale<any>
+      await wrapper.vm.$nextTick()
+      await wrapper.vm.$nextTick()
+
+      expect(getMonthLabel().toLowerCase()).toBe('janvier')
+    })
+  })
 })
diff --git a/test/components/__snapshots__/Calendar-vue.spec.ts.snap b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
index ca7a505267..e75d067c54 100644
--- a/test/components/__snapshots__/Calendar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
@@ -9,7 +9,9 @@ exports[`Calendar > renders with as correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -18,7 +20,7 @@ exports[`Calendar > renders with as correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -34,145 +36,145 @@ exports[`Calendar > renders with as correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -193,7 +195,9 @@ exports[`Calendar > renders with class correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -202,7 +206,7 @@ exports[`Calendar > renders with class correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -218,145 +222,145 @@ exports[`Calendar > renders with class correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -377,7 +381,9 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -386,7 +392,7 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-highlighted text-xs">S</th>
@@ -402,145 +408,145 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">8</div>
           </td>
         </tr>
       </tbody>
@@ -561,7 +567,9 @@ exports[`Calendar > renders with day slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -570,7 +578,7 @@ exports[`Calendar > renders with day slot correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -586,145 +594,145 @@ exports[`Calendar > renders with day slot correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -745,7 +753,9 @@ exports[`Calendar > renders with default value correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -754,7 +764,7 @@ exports[`Calendar > renders with default value correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -770,145 +780,145 @@ exports[`Calendar > renders with default value correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -929,7 +939,9 @@ exports[`Calendar > renders with disabled correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-disabled="" data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" disabled="" aria-label="Next month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-disabled="" data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" disabled="" aria-label="Next month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" disabled="" aria-label="Next year" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -938,7 +950,7 @@ exports[`Calendar > renders with disabled correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" aria-disabled="true" data-disabled="" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" aria-disabled="true" data-disabled="" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -954,145 +966,145 @@ exports[`Calendar > renders with disabled correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1113,7 +1125,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">Heading</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">Heading</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -1122,7 +1134,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -1138,145 +1150,145 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1297,7 +1309,9 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -1306,7 +1320,7 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -1322,145 +1336,145 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1481,7 +1495,9 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -1490,7 +1506,7 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -1506,145 +1522,145 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-unavailable="" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-unavailable="" data-today="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1665,7 +1681,9 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -1674,7 +1692,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -1690,145 +1708,145 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1849,7 +1867,9 @@ exports[`Calendar > renders with multiple correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -1858,7 +1878,7 @@ exports[`Calendar > renders with multiple correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -1874,145 +1894,145 @@ exports[`Calendar > renders with multiple correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2033,7 +2053,9 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -2042,7 +2064,7 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -2058,145 +2080,145 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2217,7 +2239,9 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -2226,7 +2250,7 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -2242,145 +2266,145 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2401,7 +2425,9 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January - February 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -2410,7 +2436,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -2426,150 +2452,150 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
     </table>
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -2585,145 +2611,145 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Sunday, February 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Monday, February 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Tuesday, February 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Wednesday, February 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Thursday, February 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Friday, February 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Saturday, February 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Sunday, February 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Monday, February 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Tuesday, February 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Wednesday, February 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Thursday, February 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Friday, February 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Saturday, February 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Sunday, February 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Monday, February 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Tuesday, February 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Wednesday, February 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Thursday, February 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Friday, February 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, March 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, March 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, March 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, March 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, March 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, March 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, March 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, March 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, March 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, March 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, March 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, March 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, March 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, March 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, March 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, March 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2744,7 +2770,9 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -2753,7 +2781,7 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -2769,145 +2797,145 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2928,7 +2956,9 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -2937,7 +2967,7 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -2953,145 +2983,145 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3115,7 +3145,9 @@ exports[`Calendar > renders with range and defaultValue correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -3124,7 +3156,7 @@ exports[`Calendar > renders with range and defaultValue correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -3140,145 +3172,145 @@ exports[`Calendar > renders with range and defaultValue correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-29" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-29" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-30" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-30" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-31" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-31" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-pressed="true" data-selection-start="true" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-pressed="true" data-selection-start="true" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-pressed="true" data-selection-end="true" data-selected="true" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-pressed="true" data-selection-end="true" data-selected="true" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3299,7 +3331,9 @@ exports[`Calendar > renders with range and modelValue correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -3308,7 +3342,7 @@ exports[`Calendar > renders with range and modelValue correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -3324,145 +3358,145 @@ exports[`Calendar > renders with range and modelValue correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-29" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-29" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-30" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-30" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-31" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-31" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-pressed="true" data-selection-start="true" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-pressed="true" data-selection-start="true" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-pressed="true" data-selection-end="true" data-selected="true" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-pressed="true" data-selection-end="true" data-selected="true" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3483,7 +3517,9 @@ exports[`Calendar > renders with range correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -3492,7 +3528,7 @@ exports[`Calendar > renders with range correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -3508,145 +3544,145 @@ exports[`Calendar > renders with range correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-29" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-29" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-30" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-30" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-31" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-31" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3664,7 +3700,9 @@ exports[`Calendar > renders with readonly correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -3673,7 +3711,7 @@ exports[`Calendar > renders with readonly correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" aria-readonly="true" data-readonly="" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" aria-readonly="true" data-readonly="" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -3689,145 +3727,145 @@ exports[`Calendar > renders with readonly correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3848,7 +3886,9 @@ exports[`Calendar > renders with size lg correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-md">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-md">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -3857,7 +3897,7 @@ exports[`Calendar > renders with size lg correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-md">S</th>
@@ -3873,145 +3913,145 @@ exports[`Calendar > renders with size lg correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4032,7 +4072,9 @@ exports[`Calendar > renders with size md correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -4041,7 +4083,7 @@ exports[`Calendar > renders with size md correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -4057,145 +4099,145 @@ exports[`Calendar > renders with size md correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4216,7 +4258,9 @@ exports[`Calendar > renders with size sm correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-xs">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-xs">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
@@ -4225,7 +4269,7 @@ exports[`Calendar > renders with size sm correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -4241,145 +4285,145 @@ exports[`Calendar > renders with size sm correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4400,7 +4444,9 @@ exports[`Calendar > renders with size xl correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-lg">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-lg">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-6"></svg>
@@ -4409,7 +4455,7 @@ exports[`Calendar > renders with size xl correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-lg">S</th>
@@ -4425,145 +4471,145 @@ exports[`Calendar > renders with size xl correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4584,7 +4630,9 @@ exports[`Calendar > renders with size xs correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-xs">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-xs">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-4"></svg>
@@ -4593,7 +4641,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col sm:flex-row sm:space-x-4 sm:space-y-0 space-y-2 pt-2">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-[10px]">S</th>
@@ -4609,145 +4657,145 @@ exports[`Calendar > renders with size xs correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4768,7 +4816,9 @@ exports[`Calendar > renders with ui correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -4777,7 +4827,7 @@ exports[`Calendar > renders with ui correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -4793,145 +4843,145 @@ exports[`Calendar > renders with ui correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4952,7 +5002,9 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -4961,7 +5013,7 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -4977,145 +5029,145 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">14</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">8</div>
           </td>
         </tr>
       </tbody>
@@ -5136,7 +5188,9 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -5145,7 +5199,7 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -5161,145 +5215,145 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -5320,7 +5374,9 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -5329,7 +5385,7 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -5345,145 +5401,145 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -5504,7 +5560,9 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -5513,7 +5571,7 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -5529,145 +5587,145 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -5688,7 +5746,9 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -5697,7 +5757,7 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -5713,145 +5773,145 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -5872,7 +5932,9 @@ exports[`Calendar > renders with weekNumbers correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -5881,7 +5943,7 @@ exports[`Calendar > renders with weekNumbers correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-8 [&amp;>*:first-child]:col-start-2">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -5897,145 +5959,145 @@ exports[`Calendar > renders with weekNumbers correctly 1`] = `
         <tr data-slot="gridRow" class="grid place-items-center grid-cols-8">
           <td role="gridcell" data-slot="cellWeek" class="relative text-center text-muted text-xs">1</td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid place-items-center grid-cols-8">
           <td role="gridcell" data-slot="cellWeek" class="relative text-center text-muted text-xs">2</td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid place-items-center grid-cols-8">
           <td role="gridcell" data-slot="cellWeek" class="relative text-center text-muted text-xs">3</td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid place-items-center grid-cols-8">
           <td role="gridcell" data-slot="cellWeek" class="relative text-center text-muted text-xs">4</td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid place-items-center grid-cols-8">
           <td role="gridcell" data-slot="cellWeek" class="relative text-center text-muted text-xs">5</td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid place-items-center grid-cols-8">
           <td role="gridcell" data-slot="cellWeek" class="relative text-center text-muted text-xs">6</td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -6056,7 +6118,9 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -6065,7 +6129,7 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
@@ -6081,145 +6145,145 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-09" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Sunday, February 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-09" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
         </tr>
       </tbody>
@@ -6240,7 +6304,9 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -6249,7 +6315,7 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">Sun</th>
@@ -6265,145 +6331,145 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -6424,7 +6490,9 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
@@ -6433,7 +6501,7 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -6449,121 +6517,121 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
       </tbody>
@@ -6582,14 +6650,16 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
       <!--v-if-->
     </button>
     <!--v-if-->
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div>
     <!--v-if--><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -6605,145 +6675,145 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -6762,14 +6832,16 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
     <!--v-if-->
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -6785,145 +6857,145 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
diff --git a/test/components/__snapshots__/Calendar.spec.ts.snap b/test/components/__snapshots__/Calendar.spec.ts.snap
index 61ad59cc42..a162fd2afd 100644
--- a/test/components/__snapshots__/Calendar.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar.spec.ts.snap
@@ -9,7 +9,9 @@ exports[`Calendar > renders with as correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -18,7 +20,7 @@ exports[`Calendar > renders with as correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -34,145 +36,145 @@ exports[`Calendar > renders with as correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -193,7 +195,9 @@ exports[`Calendar > renders with class correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -202,7 +206,7 @@ exports[`Calendar > renders with class correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -218,145 +222,145 @@ exports[`Calendar > renders with class correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -377,7 +381,9 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -386,7 +392,7 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-highlighted text-xs">S</th>
@@ -402,145 +408,145 @@ exports[`Calendar > renders with color neutral correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-inverted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-inverted m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-inverted data-[selected]:text-inverted data-today:not-data-[selected]:text-highlighted data-[highlighted]:bg-inverted/20 hover:not-data-[selected]:bg-inverted/10">8</div>
           </td>
         </tr>
       </tbody>
@@ -561,7 +567,9 @@ exports[`Calendar > renders with day slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -570,7 +578,7 @@ exports[`Calendar > renders with day slot correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -586,145 +594,145 @@ exports[`Calendar > renders with day slot correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -745,7 +753,9 @@ exports[`Calendar > renders with default value correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -754,7 +764,7 @@ exports[`Calendar > renders with default value correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -770,145 +780,145 @@ exports[`Calendar > renders with default value correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -929,7 +939,9 @@ exports[`Calendar > renders with disabled correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-disabled="" data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" disabled="" aria-label="Next month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-disabled="" data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" disabled="" aria-label="Next month" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" disabled="" aria-label="Next year" aria-disabled="true" data-disabled="true" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -938,7 +950,7 @@ exports[`Calendar > renders with disabled correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" aria-disabled="true" data-disabled="" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" aria-disabled="true" data-disabled="" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -954,145 +966,145 @@ exports[`Calendar > renders with disabled correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1113,7 +1125,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">Heading</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">Heading</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -1122,7 +1134,7 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -1138,145 +1150,145 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1297,7 +1309,9 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -1306,7 +1320,7 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -1322,145 +1336,145 @@ exports[`Calendar > renders with isDateDisabled correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-disabled="" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1481,7 +1495,9 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -1490,7 +1506,7 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -1506,145 +1522,145 @@ exports[`Calendar > renders with isDateUnavailable correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-unavailable="" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-unavailable="" data-today="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-unavailable="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="true" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-unavailable="" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1665,7 +1681,9 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -1674,7 +1692,7 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -1690,145 +1708,145 @@ exports[`Calendar > renders with modelValue correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -1849,7 +1867,9 @@ exports[`Calendar > renders with multiple correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -1858,7 +1878,7 @@ exports[`Calendar > renders with multiple correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -1874,145 +1894,145 @@ exports[`Calendar > renders with multiple correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2033,7 +2053,9 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -2042,7 +2064,7 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -2058,145 +2080,145 @@ exports[`Calendar > renders with nextMonth correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2217,7 +2239,9 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:bg-primary/10 active:bg-primary/10 focus:outline-none focus-visible:bg-primary/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -2226,7 +2250,7 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -2242,145 +2266,145 @@ exports[`Calendar > renders with nextYear correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2401,7 +2425,9 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January - February 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -2410,7 +2436,7 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -2426,150 +2452,150 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
     </table>
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -2585,145 +2611,145 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Sunday, February 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Monday, February 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Tuesday, February 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Wednesday, February 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Thursday, February 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Friday, February 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Saturday, February 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Sunday, February 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Monday, February 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Tuesday, February 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Wednesday, February 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Thursday, February 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Friday, February 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Saturday, February 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Sunday, February 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Monday, February 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Tuesday, February 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Wednesday, February 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Thursday, February 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Friday, February 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, March 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, March 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, March 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, March 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, March 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, March 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, March 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, March 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, March 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, March 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, March 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, March 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, March 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, March 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, March 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, March 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-03-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2744,7 +2770,9 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -2753,7 +2781,7 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -2769,145 +2797,145 @@ exports[`Calendar > renders with prevMonth correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -2928,7 +2956,9 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -2937,7 +2967,7 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -2953,145 +2983,145 @@ exports[`Calendar > renders with prevYear correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3115,7 +3145,9 @@ exports[`Calendar > renders with range and defaultValue correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -3124,7 +3156,7 @@ exports[`Calendar > renders with range and defaultValue correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -3140,145 +3172,145 @@ exports[`Calendar > renders with range and defaultValue correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-29" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-29" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-30" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-30" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-31" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-31" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-pressed="true" data-selection-start="true" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-pressed="true" data-selection-start="true" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-pressed="true" data-selection-end="true" data-selected="true" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-pressed="true" data-selection-end="true" data-selected="true" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3299,7 +3331,9 @@ exports[`Calendar > renders with range and modelValue correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -3308,7 +3342,7 @@ exports[`Calendar > renders with range and modelValue correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -3324,145 +3358,145 @@ exports[`Calendar > renders with range and modelValue correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-29" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-29" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-30" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-30" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-31" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-31" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-pressed="true" data-selection-start="true" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" aria-pressed="true" data-selection-start="true" data-selected="true" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-pressed="true" data-selection-end="true" data-selected="true" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" aria-pressed="true" data-selection-end="true" data-selected="true" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3483,7 +3517,9 @@ exports[`Calendar > renders with range correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -3492,7 +3528,7 @@ exports[`Calendar > renders with range correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -3508,145 +3544,145 @@ exports[`Calendar > renders with range correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-29" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-29" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-30" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-30" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-31" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2024-12-31" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-01" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-02" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-03" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-04" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-05" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-06" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-07" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-outside-visible-view="" data-value="2025-02-08" data-outside-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3664,7 +3700,9 @@ exports[`Calendar > renders with readonly correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -3673,7 +3711,7 @@ exports[`Calendar > renders with readonly correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" aria-readonly="true" data-readonly="" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" aria-readonly="true" data-readonly="" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -3689,145 +3727,145 @@ exports[`Calendar > renders with readonly correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -3848,7 +3886,9 @@ exports[`Calendar > renders with size lg correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-md">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-md">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -3857,7 +3897,7 @@ exports[`Calendar > renders with size lg correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-md">S</th>
@@ -3873,145 +3913,145 @@ exports[`Calendar > renders with size lg correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-9 text-md data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4032,7 +4072,9 @@ exports[`Calendar > renders with size md correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -4041,7 +4083,7 @@ exports[`Calendar > renders with size md correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -4057,145 +4099,145 @@ exports[`Calendar > renders with size md correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4216,7 +4258,9 @@ exports[`Calendar > renders with size sm correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-xs">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-xs">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -4225,7 +4269,7 @@ exports[`Calendar > renders with size sm correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -4241,145 +4285,145 @@ exports[`Calendar > renders with size sm correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4400,7 +4444,9 @@ exports[`Calendar > renders with size xl correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-lg">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-lg">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -4409,7 +4455,7 @@ exports[`Calendar > renders with size xl correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-lg">S</th>
@@ -4425,145 +4471,145 @@ exports[`Calendar > renders with size xl correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-10 text-lg data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4584,7 +4630,9 @@ exports[`Calendar > renders with size xs correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-xs">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-xs">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -4593,7 +4641,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col sm:flex-row sm:space-x-4 sm:space-y-0 space-y-2 pt-2">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-[10px]">S</th>
@@ -4609,145 +4657,145 @@ exports[`Calendar > renders with size xs correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-xs">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-7 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4768,7 +4816,9 @@ exports[`Calendar > renders with ui correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -4777,7 +4827,7 @@ exports[`Calendar > renders with ui correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -4793,145 +4843,145 @@ exports[`Calendar > renders with ui correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -4952,7 +5002,9 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -4961,7 +5013,7 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -4977,145 +5029,145 @@ exports[`Calendar > renders with variant outline correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">14</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/50 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/10 hover:not-data-[selected]:bg-primary/10">8</div>
           </td>
         </tr>
       </tbody>
@@ -5136,7 +5188,9 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -5145,7 +5199,7 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -5161,145 +5215,145 @@ exports[`Calendar > renders with variant soft correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -5320,7 +5374,9 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -5329,7 +5385,7 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -5345,145 +5401,145 @@ exports[`Calendar > renders with variant solid correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -5504,7 +5560,9 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -5513,7 +5571,7 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -5529,145 +5587,145 @@ exports[`Calendar > renders with variant subtle correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-selected="true" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-selected="true" data-value="2025-01-15" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary/10 data-[selected]:text-primary data-[selected]:ring data-[selected]:ring-inset data-[selected]:ring-primary/25 data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -5688,7 +5746,9 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -5697,7 +5757,7 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -5713,145 +5773,145 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -5872,7 +5932,9 @@ exports[`Calendar > renders with weekNumbers correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -5881,7 +5943,7 @@ exports[`Calendar > renders with weekNumbers correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-8 [&amp;>*:first-child]:col-start-2">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -5897,145 +5959,145 @@ exports[`Calendar > renders with weekNumbers correctly 1`] = `
         <tr data-slot="gridRow" class="grid place-items-center grid-cols-8">
           <td role="gridcell" data-slot="cellWeek" class="relative text-center text-muted text-xs">1</td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid place-items-center grid-cols-8">
           <td role="gridcell" data-slot="cellWeek" class="relative text-center text-muted text-xs">2</td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid place-items-center grid-cols-8">
           <td role="gridcell" data-slot="cellWeek" class="relative text-center text-muted text-xs">3</td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid place-items-center grid-cols-8">
           <td role="gridcell" data-slot="cellWeek" class="relative text-center text-muted text-xs">4</td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid place-items-center grid-cols-8">
           <td role="gridcell" data-slot="cellWeek" class="relative text-center text-muted text-xs">5</td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid place-items-center grid-cols-8">
           <td role="gridcell" data-slot="cellWeek" class="relative text-center text-muted text-xs">6</td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -6056,7 +6118,9 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -6065,7 +6129,7 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">M</th>
@@ -6081,145 +6145,145 @@ exports[`Calendar > renders with weekStartsOn correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-09" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Sunday, February 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-09" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
         </tr>
       </tbody>
@@ -6240,7 +6304,9 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -6249,7 +6315,7 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">Sun</th>
@@ -6265,145 +6331,145 @@ exports[`Calendar > renders with weekdayFormat correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -6424,7 +6490,9 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
@@ -6433,7 +6501,7 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -6449,121 +6517,121 @@ exports[`Calendar > renders without fixedWeeks correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
       </tbody>
@@ -6582,14 +6650,16 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
       <!--v-if-->
     </button>
     <!--v-if-->
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div>
     <!--v-if--><button type="button" aria-label="Next year" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -6605,145 +6675,145 @@ exports[`Calendar > renders without monthControls correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
@@ -6762,14 +6832,16 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div data-slot="heading" class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
+    <div data-slot="heading" class="mx-auto text-center font-medium text-sm">
+      <div class="inline-flex items-center gap-1"><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="January, Switch to month view">January</button><button type="button" class="rounded-md px-2 py-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accented cursor-pointer hover:bg-elevated/50" aria-label="2025, Switch to year view">2025</button></div>
+    </div><button type="button" aria-label="Next month" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated focus:outline-none focus-visible:bg-elevated hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
     <!--v-if-->
   </div>
   <div data-slot="body" class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-    <table tabindex="-1" role="application" data-slot="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
+    <table tabindex="-1" role="application" data-slot="grid" class="w-full select-none space-y-1 focus:outline-none border-collapse">
       <thead aria-hidden="true">
         <tr data-slot="gridWeekDaysRow" class="mb-1 grid w-full grid-cols-7">
           <th data-slot="headCell" class="rounded-md text-primary text-xs">S</th>
@@ -6785,145 +6857,145 @@ exports[`Calendar > renders without yearControls correctly 1`] = `
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
+            <div role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">9</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
+            <div role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">10</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
+            <div role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">11</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
+            <div role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">12</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
+            <div role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">13</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
+            <div role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">14</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
+            <div role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">15</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
+            <div role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">16</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
+            <div role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">17</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
+            <div role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">18</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
+            <div role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">19</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
+            <div role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">20</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
+            <div role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">21</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
+            <div role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">22</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
+            <div role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">23</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
+            <div role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">24</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
+            <div role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">25</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
+            <div role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">26</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
+            <div role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">27</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
+            <div role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">28</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
+            <div role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">29</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
+            <div role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">30</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
+            <div role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">31</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
+            <div role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">1</div>
           </td>
         </tr>
         <tr data-slot="gridRow" class="grid grid-cols-7 place-items-center">
           <!--v-if-->
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
+            <div role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">2</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
+            <div role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">3</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
+            <div role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">4</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
+            <div role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">5</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
+            <div role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">6</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
+            <div role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">7</div>
           </td>
           <td role="gridcell" aria-disabled="false" data-slot="cell" class="relative text-center text-sm">
-            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted transition focus-visible:ring-primary size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
+            <div role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" data-slot="cellTrigger" class="relative flex items-center justify-center whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-muted transition focus-visible:ring-primary m-0.5 rounded-full data-unavailable:line-through data-unavailable:text-muted data-unavailable:pointer-events-none data-today:font-semibold data-[outside-view]:text-muted size-8 data-[selected]:bg-primary data-[selected]:text-inverted data-today:not-data-[selected]:text-primary data-[highlighted]:bg-primary/20 hover:not-data-[selected]:bg-primary/20">8</div>
           </td>
         </tr>
       </tbody>
diff --git a/test/nuxt/setup.ts b/test/nuxt/setup.ts
index c3ecf6a93e..3c65e062c6 100644
--- a/test/nuxt/setup.ts
+++ b/test/nuxt/setup.ts
@@ -19,4 +19,49 @@ configureAxe({
   }
 })
 
+function createStorageMock() {
+  const store = new Map<string, string>()
+
+  return {
+    get length() {
+      return store.size
+    },
+    clear() {
+      store.clear()
+    },
+    getItem(key: string) {
+      return store.get(key) ?? null
+    },
+    key(index: number) {
+      return Array.from(store.keys())[index] ?? null
+    },
+    removeItem(key: string) {
+      store.delete(key)
+    },
+    setItem(key: string, value: string) {
+      store.set(key, String(value))
+    }
+  }
+}
+
+const storage = createStorageMock()
+
+if (typeof window !== 'undefined') {
+  const localStorage = window.localStorage
+
+  if (!localStorage || typeof localStorage.getItem !== 'function' || typeof localStorage.setItem !== 'function') {
+    Object.defineProperty(window, 'localStorage', {
+      value: storage,
+      configurable: true
+    })
+  }
+}
+
+if (typeof globalThis.localStorage === 'undefined' || typeof globalThis.localStorage.getItem !== 'function' || typeof globalThis.localStorage.setItem !== 'function') {
+  Object.defineProperty(globalThis, 'localStorage', {
+    value: storage,
+    configurable: true
+  })
+}
+
 expect.extend(matchers)
diff --git a/test/utils/setup.ts b/test/utils/setup.ts
index 93adebdb53..d6d59354bc 100644
--- a/test/utils/setup.ts
+++ b/test/utils/setup.ts
@@ -12,6 +12,47 @@ window.IntersectionObserver = class IntersectionObserver {
   disconnect() {}
 }
 
+function createStorageMock() {
+  const store = new Map<string, string>()
+
+  return {
+    get length() {
+      return store.size
+    },
+    clear() {
+      store.clear()
+    },
+    getItem(key: string) {
+      return store.get(key) ?? null
+    },
+    key(index: number) {
+      return Array.from(store.keys())[index] ?? null
+    },
+    removeItem(key: string) {
+      store.delete(key)
+    },
+    setItem(key: string, value: string) {
+      store.set(key, String(value))
+    }
+  }
+}
+
+const storage = createStorageMock()
+
+if (!window.localStorage || typeof window.localStorage.getItem !== 'function' || typeof window.localStorage.setItem !== 'function') {
+  Object.defineProperty(window, 'localStorage', {
+    value: storage,
+    configurable: true
+  })
+}
+
+if (typeof globalThis.localStorage === 'undefined' || typeof globalThis.localStorage.getItem !== 'function' || typeof globalThis.localStorage.setItem !== 'function') {
+  Object.defineProperty(globalThis, 'localStorage', {
+    value: storage,
+    configurable: true
+  })
+}
+
 configureAxe({
   globalOptions: {
     rules: [{