From 60ddf41e74ebc86ec085524d69c986f51289c9c6 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Tue, 12 Nov 2024 18:37:41 +0500
Subject: [PATCH 01/30] feat(calendar): implement component

---
 docs/content/3.components/calendar.md        | 32 ++++++++++++++++
 playground/app/pages/components/calendar.vue |  5 +++
 src/runtime/components/Calendar.vue          | 39 ++++++++++++++++++++
 src/runtime/types/index.ts                   |  1 +
 src/theme/calendar.ts                        |  7 ++++
 src/theme/index.ts                           |  1 +
 test/components/Calendar.spec.ts             | 17 +++++++++
 7 files changed, 102 insertions(+)
 create mode 100644 docs/content/3.components/calendar.md
 create mode 100644 playground/app/pages/components/calendar.vue
 create mode 100644 src/runtime/components/Calendar.vue
 create mode 100644 src/theme/calendar.ts
 create mode 100644 test/components/Calendar.spec.ts

diff --git a/docs/content/3.components/calendar.md b/docs/content/3.components/calendar.md
new file mode 100644
index 0000000000..301407d4a1
--- /dev/null
+++ b/docs/content/3.components/calendar.md
@@ -0,0 +1,32 @@
+---
+description:
+links: 
+  - label: Calendar
+    icon: i-custom-radix-vue
+    to: https://www.radix-vue.com/components/calendar.html
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Calendar.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme
diff --git a/playground/app/pages/components/calendar.vue b/playground/app/pages/components/calendar.vue
new file mode 100644
index 0000000000..689a2358aa
--- /dev/null
+++ b/playground/app/pages/components/calendar.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <UCalendar />
+  </div>
+</template>
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
new file mode 100644
index 0000000000..722b3400d5
--- /dev/null
+++ b/src/runtime/components/Calendar.vue
@@ -0,0 +1,39 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { CalendarRootProps, CalendarRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/calendar'
+
+const appConfig = _appConfig as AppConfig & { ui: { calendar: Partial<typeof theme> } }
+
+const calendar = tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })
+
+type CalendarVariants = VariantProps<typeof calendar>
+
+export interface CalendarProps extends Pick<CalendarRootProps> {
+  class?: any
+  ui?: Partial<typeof calendar.slots>
+}
+
+export interface CalendarEmits extends CalendarRootEmits {}
+
+export interface CalendarSlots {}
+</script>
+
+<script setup lang="ts">
+import { CalendarRoot, useForwardPropsEmits } from 'radix-vue'
+import { reactivePick } from '@vueuse/core'
+
+const props = defineProps<CalendarProps>()
+const emits = defineEmits<CalendarEmits>()
+const slots = defineSlots<CalendarSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props), emits)
+
+const ui = calendar()
+</script>
+
+<template>
+  <CalendarRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })" />
+</template>
diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index 5a255078d5..0153fa2273 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -6,6 +6,7 @@ export * from '../components/AvatarGroup.vue'
 export * from '../components/Badge.vue'
 export * from '../components/Breadcrumb.vue'
 export * from '../components/Button.vue'
+export * from '../components/Calendar.vue'
 export * from '../components/Card.vue'
 export * from '../components/Carousel.vue'
 export * from '../components/Checkbox.vue'
diff --git a/src/theme/calendar.ts b/src/theme/calendar.ts
new file mode 100644
index 0000000000..fc5e12fb22
--- /dev/null
+++ b/src/theme/calendar.ts
@@ -0,0 +1,7 @@
+export default {
+  slots: {
+    root: ''
+  },
+  variants: {},
+  compoundVariants: []
+}
diff --git a/src/theme/index.ts b/src/theme/index.ts
index d02a54c358..d11b2a13da 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -6,6 +6,7 @@ export { default as badge } from './badge'
 export { default as breadcrumb } from './breadcrumb'
 export { default as button } from './button'
 export { default as buttonGroup } from './button-group'
+export { default as calendar } from './calendar'
 export { default as card } from './card'
 export { default as carousel } from './carousel'
 export { default as checkbox } from './checkbox'
diff --git a/test/components/Calendar.spec.ts b/test/components/Calendar.spec.ts
new file mode 100644
index 0000000000..d5dd06469f
--- /dev/null
+++ b/test/components/Calendar.spec.ts
@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+import Calendar, { type CalendarProps, type CalendarSlots } from '../../src/runtime/components/Calendar.vue'
+import ComponentRender from '../component-render'
+
+describe('Calendar', () => {
+  it.each([
+    // Props
+    ['with as', { props: { as: 'div' } }],
+    ['with class', { props: { class: '' } }],
+    ['with ui', { props: { ui: {} } }],
+    // Slots
+    ['with default slot', { slots: { default: () => 'Default slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CalendarProps, slots?: Partial<CalendarSlots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, Calendar)
+    expect(html).toMatchSnapshot()
+  })
+})

From 8edd8f2b32888d8460d3292f3f2105c40fd4afb9 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Wed, 13 Nov 2024 15:19:11 +0500
Subject: [PATCH 02/30] feat(Calendar): base struct

---
 package.json                                 |  1 +
 playground/app/app.vue                       |  1 +
 playground/app/pages/components/calendar.vue | 31 ++++++-
 pnpm-lock.yaml                               |  3 +
 src/runtime/components/Calendar.vue          | 94 ++++++++++++++++++--
 src/theme/calendar.ts                        | 48 ++++++++--
 6 files changed, 161 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 6ab51705b7..079e3fcbca 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
   },
   "dependencies": {
     "@iconify/vue": "^4.1.2",
+    "@internationalized/date": "^3.5.6",
     "@nuxt/devtools-kit": "^1.6.0",
     "@nuxt/fonts": "^0.10.2",
     "@nuxt/icon": "^1.7.2",
diff --git a/playground/app/app.vue b/playground/app/app.vue
index 88d97b594e..d56812c0b7 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -13,6 +13,7 @@ const components = [
   'button',
   'button-group',
   'card',
+  'calendar',
   'carousel',
   'checkbox',
   'chip',
diff --git a/playground/app/pages/components/calendar.vue b/playground/app/pages/components/calendar.vue
index 689a2358aa..557205dffd 100644
--- a/playground/app/pages/components/calendar.vue
+++ b/playground/app/pages/components/calendar.vue
@@ -1,5 +1,32 @@
+<script setup lang="ts">
+import theme from '#build/ui/calendar'
+
+const colors = Object.keys(theme.variants.color) as Array<keyof typeof theme.variants.color>
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
+
+const value = ref<Date>(new Date())
+</script>
+
 <template>
-  <div>
-    <UCalendar />
+  <div class="flex flex-col gap-2">
+    <div class="flex justify-center gap-2">
+      <UCalendar v-model="value" />
+    </div>
+    <div class="flex items-center gap-2">
+      <UCalendar
+        v-for="color in colors"
+        :key="color"
+        v-model="value"
+        :color="color"
+      />
+    </div>
+    <div class="flex items-center gap-2">
+      <UCalendar
+        v-for="size in sizes"
+        :key="size"
+        v-model="value"
+        :size="size"
+      />
+    </div>
   </div>
 </template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dc7091cf46..552a842fe5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@iconify/vue':
         specifier: ^4.1.2
         version: 4.1.2(vue@3.5.12(typescript@5.6.3))
+      '@internationalized/date':
+        specifier: ^3.5.6
+        version: 3.5.6
       '@nuxt/devtools-kit':
         specifier: ^1.6.0
         version: 1.6.0(magicast@0.3.5)(rollup@4.25.0)(vite@5.4.11(@types/node@22.9.0)(lightningcss@1.28.1)(terser@5.36.0))
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 722b3400d5..4618c122f7 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
+import { computed } from 'vue'
 import { tv, type VariantProps } from 'tailwind-variants'
-import type { CalendarRootProps, CalendarRootEmits } from 'radix-vue'
+import type { CalendarRootProps, CalendarRootEmits, CalendarCellTriggerProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/calendar'
@@ -11,29 +12,104 @@ const calendar = tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })
 
 type CalendarVariants = VariantProps<typeof calendar>
 
-export interface CalendarProps extends Pick<CalendarRootProps> {
+export type CalendarProps = CalendarRootProps & {
+  color?: CalendarVariants['color']
+  size?: CalendarVariants['size']
   class?: any
   ui?: Partial<typeof calendar.slots>
 }
 
 export interface CalendarEmits extends CalendarRootEmits {}
 
-export interface CalendarSlots {}
+export interface CalendarSlots {
+  'heading': (props: { value: string }) => any
+  'day': (props: Pick<CalendarCellTriggerProps, 'day'>) => any
+  'week-day': (props: { day: string }) => any
+}
 </script>
 
 <script setup lang="ts">
-import { CalendarRoot, useForwardPropsEmits } from 'radix-vue'
+import { useForwardPropsEmits, CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
+import UIcon from './Icon.vue'
 
-const props = defineProps<CalendarProps>()
+const props = withDefaults(defineProps<CalendarProps>(), {
+  fixedWeeks: true
+})
 const emits = defineEmits<CalendarEmits>()
-const slots = defineSlots<CalendarSlots>()
+defineSlots<CalendarSlots>()
 
-const rootProps = useForwardPropsEmits(reactivePick(props), emits)
+const _rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'modelValue'), emits)
 
-const ui = calendar()
+const ui = computed(() => calendar({
+  color: props.color,
+  size: props.size
+}))
 </script>
 
 <template>
-  <CalendarRoot v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })" />
+  <CalendarRoot
+    v-slot="{ weekDays, grid }"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    fixed-weeks
+  >
+    <CalendarHeader :class="ui.header({ class: props.ui?.header })">
+      <CalendarPrev :class="ui.paginationButton({ class: props.ui?.paginationButton })">
+        <UIcon :name="appConfig.ui.icons.chevronLeft" :class="ui.paginationIcon({ class: props.ui?.paginationIcon })" />
+      </CalendarPrev>
+      <CalendarHeading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })">
+        <slot name="heading" :value="headingValue">
+          {{ headingValue }}
+        </slot>
+      </CalendarHeading>
+      <CalendarNext :class="ui.paginationButton({ class: props.ui?.paginationButton })">
+        <UIcon :name="appConfig.ui.icons.chevronRight" :class="ui.paginationIcon({ class: props.ui?.paginationIcon })" />
+      </CalendarNext>
+    </CalendarHeader>
+    <div :class="ui.body({ class: props.ui?.body })">
+      <CalendarGrid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        :class="ui.grid({ class: props.ui?.grid })"
+      >
+        <CalendarGridHead>
+          <CalendarGridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
+            <CalendarHeadCell
+              v-for="day in weekDays"
+              :key="day"
+              :class="ui.headCell({ class: props.ui?.headCell })"
+            >
+              <slot name="week-day" :day="day">
+                {{ day }}
+              </slot>
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody :class="ui.gridBody({ class: props.ui?.gridBody })">
+          <CalendarGridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+            :class="ui.gridRow({ class: props.ui?.gridRow })"
+          >
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+              :class="ui.cell({ class: props.ui?.cell })"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+                :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
+              >
+                <slot name="day" :day="weekDate">
+                  {{ weekDate.day }}
+                </slot>
+              </CalendarCellTrigger>
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
 </template>
diff --git a/src/theme/calendar.ts b/src/theme/calendar.ts
index fc5e12fb22..91c187185d 100644
--- a/src/theme/calendar.ts
+++ b/src/theme/calendar.ts
@@ -1,7 +1,43 @@
-export default {
-  slots: {
-    root: ''
-  },
-  variants: {},
-  compoundVariants: []
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => {
+  return {
+    slots: {
+      root: 'rounded-[calc(var(--ui-radius)*1.5)] p-4',
+      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-sm font-medium',
+      grid: 'w-full border-collapse select-none space-y-1',
+      gridRow: 'grid grid-cols-7',
+      gridWeekDaysRow: 'mb-1 grid w-full grid-cols-7',
+      gridBody: 'grid',
+      headCell: 'rounded-md text-xs text-red',
+      cell: 'relative text-center text-sm',
+      cellTrigger: 'relative flex items-center justify-center rounded-full whitespace-nowrap text-sm font-normal w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[disabled]:text-black/30 data-[selected]:!bg-green10 data-[selected]:text-white hover:bg-green5 data-[highlighted]:bg-green5 data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9',
+      paginationButton: 'inline-flex items-center cursor-pointer justify-center rounded-[9px] bg-transparent w-8 h-8 hover:bg-black hover:text-white active:scale-98 active:transition-all focus:shadow-[0_0_0_2px] focus:shadow-black',
+      paginationIcon: 'w-6 h-6'
+    },
+    variants: {
+      color: {
+        ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
+        neutral: ''
+      },
+      size: {
+        xs: {},
+        sm: {},
+        md: {},
+        lg: {},
+        xl: {}
+      }
+    },
+    compoundVariants: [
+      ...(options.theme.colors || []).map((color: string) => ({
+        color
+      }))
+    ],
+    defaultVariants: {
+      size: 'md',
+      color: 'primary'
+    }
+  }
 }

From fc9d69bafbd2f1eb8837dde6f8834db317420f30 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Wed, 13 Nov 2024 16:45:19 +0500
Subject: [PATCH 03/30] feat(Calendar): style

---
 playground/app/pages/components/calendar.vue |  6 +--
 src/runtime/components/Calendar.vue          | 12 ++---
 src/theme/calendar.ts                        | 47 +++++++++++++++-----
 3 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/playground/app/pages/components/calendar.vue b/playground/app/pages/components/calendar.vue
index 557205dffd..60d5c9e19f 100644
--- a/playground/app/pages/components/calendar.vue
+++ b/playground/app/pages/components/calendar.vue
@@ -8,11 +8,11 @@ const value = ref<Date>(new Date())
 </script>
 
 <template>
-  <div class="flex flex-col gap-2">
+  <div class="flex flex-col gap-4">
     <div class="flex justify-center gap-2">
       <UCalendar v-model="value" />
     </div>
-    <div class="flex items-center gap-2">
+    <div class="flex items-center gap-4">
       <UCalendar
         v-for="color in colors"
         :key="color"
@@ -20,7 +20,7 @@ const value = ref<Date>(new Date())
         :color="color"
       />
     </div>
-    <div class="flex items-center gap-2">
+    <div class="flex items-center gap-4">
       <UCalendar
         v-for="size in sizes"
         :key="size"
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 4618c122f7..2100116dfa 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -31,7 +31,8 @@ export interface CalendarSlots {
 <script setup lang="ts">
 import { useForwardPropsEmits, CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import UIcon from './Icon.vue'
+import UButton from './Button.vue'
+// import { useLocale } from '../composables/useLocale'
 
 const props = withDefaults(defineProps<CalendarProps>(), {
   fixedWeeks: true
@@ -39,6 +40,7 @@ const props = withDefaults(defineProps<CalendarProps>(), {
 const emits = defineEmits<CalendarEmits>()
 defineSlots<CalendarSlots>()
 
+// const { locale, dir } = useLocale()
 const _rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'modelValue'), emits)
 
 const ui = computed(() => calendar({
@@ -54,16 +56,16 @@ const ui = computed(() => calendar({
     fixed-weeks
   >
     <CalendarHeader :class="ui.header({ class: props.ui?.header })">
-      <CalendarPrev :class="ui.paginationButton({ class: props.ui?.paginationButton })">
-        <UIcon :name="appConfig.ui.icons.chevronLeft" :class="ui.paginationIcon({ class: props.ui?.paginationIcon })" />
+      <CalendarPrev as-child>
+        <UButton :icon="appConfig.ui.icons.chevronLeft" :size="props.size" color="neutral" variant="ghost" />
       </CalendarPrev>
       <CalendarHeading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })">
         <slot name="heading" :value="headingValue">
           {{ headingValue }}
         </slot>
       </CalendarHeading>
-      <CalendarNext :class="ui.paginationButton({ class: props.ui?.paginationButton })">
-        <UIcon :name="appConfig.ui.icons.chevronRight" :class="ui.paginationIcon({ class: props.ui?.paginationIcon })" />
+      <CalendarNext as-child>
+        <UButton :icon="appConfig.ui.icons.chevronRight" :size="props.size" color="neutral" variant="ghost" />
       </CalendarNext>
     </CalendarHeader>
     <div :class="ui.body({ class: props.ui?.body })">
diff --git a/src/theme/calendar.ts b/src/theme/calendar.ts
index 91c187185d..d34ce1127e 100644
--- a/src/theme/calendar.ts
+++ b/src/theme/calendar.ts
@@ -3,7 +3,7 @@ import type { ModuleOptions } from '../module'
 export default (options: Required<ModuleOptions>) => {
   return {
     slots: {
-      root: 'rounded-[calc(var(--ui-radius)*1.5)] p-4',
+      root: 'rounded-[calc(var(--ui-radius)*1.5)]',
       header: 'flex items-center justify-between',
       body: 'flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0',
       heading: 'text-sm font-medium',
@@ -11,23 +11,46 @@ export default (options: Required<ModuleOptions>) => {
       gridRow: 'grid grid-cols-7',
       gridWeekDaysRow: 'mb-1 grid w-full grid-cols-7',
       gridBody: 'grid',
-      headCell: 'rounded-md text-xs text-red',
+      headCell: 'rounded-md text-xs',
       cell: 'relative text-center text-sm',
-      cellTrigger: 'relative flex items-center justify-center rounded-full whitespace-nowrap text-sm font-normal w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black data-[disabled]:text-black/30 data-[selected]:!bg-green10 data-[selected]:text-white hover:bg-green5 data-[highlighted]:bg-green5 data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9',
-      paginationButton: 'inline-flex items-center cursor-pointer justify-center rounded-[9px] bg-transparent w-8 h-8 hover:bg-black hover:text-white active:scale-98 active:transition-all focus:shadow-[0_0_0_2px] focus:shadow-black',
-      paginationIcon: 'w-6 h-6'
+      cellTrigger: ['relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:text-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)]', options.theme.transitions && 'transition-[color,opacity] duration-200']
     },
     variants: {
       color: {
-        ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
-        neutral: ''
+        ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
+          headCell: `text-[var(--ui-${color})]`,
+          cellTrigger: `focus-visible:ring-[var(--ui-${color})] data-[selected]:!bg-[var(--ui-${color})] data-[today]:bg-[var(--ui-${color})]/10`
+        }])),
+        neutral: {
+          cellTrigger: ''
+        }
       },
       size: {
-        xs: {},
-        sm: {},
-        md: {},
-        lg: {},
-        xl: {}
+        xs: {
+          heading: 'text-xs',
+          cell: 'text-xs',
+          headCell: 'text-[10px]',
+          cellTrigger: 'w-7 h-7',
+          body: 'space-y-2 pt-2'
+        },
+        sm: {
+          heading: 'text-xs',
+          cell: 'text-xs',
+          cellTrigger: 'w-7 h-7'
+        },
+        md: {
+          cellTrigger: 'w-8 h-8'
+        },
+        lg: {
+          heading: 'text-md',
+          headCell: 'text-md',
+          cellTrigger: 'w-9 h-9 text-md'
+        },
+        xl: {
+          heading: 'text-lg',
+          headCell: 'text-lg',
+          cellTrigger: 'w-10 h-10 text-lg'
+        }
       }
     },
     compoundVariants: [

From 0ebafb5a454783f21b7ba13baa2b8630431171b8 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Wed, 13 Nov 2024 17:51:31 +0500
Subject: [PATCH 04/30] feat(Calendar): multi

---
 playground/app/pages/components/calendar.vue | 22 +++++++++---
 src/runtime/components/Calendar.vue          | 36 +++++++++++++++++---
 2 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/playground/app/pages/components/calendar.vue b/playground/app/pages/components/calendar.vue
index 60d5c9e19f..9bb409dae7 100644
--- a/playground/app/pages/components/calendar.vue
+++ b/playground/app/pages/components/calendar.vue
@@ -1,22 +1,36 @@
 <script setup lang="ts">
+import { startOfWeek, endOfWeek, now, getLocalTimeZone } from '@internationalized/date'
 import theme from '#build/ui/calendar'
 
 const colors = Object.keys(theme.variants.color) as Array<keyof typeof theme.variants.color>
 const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 
-const value = ref<Date>(new Date())
+const singleValue = ref(new Date())
+const multipleValue = ref([
+  startOfWeek(now(getLocalTimeZone()), 'en').toDate(),
+  endOfWeek(now(getLocalTimeZone()), 'en').toDate()
+])
 </script>
 
 <template>
   <div class="flex flex-col gap-4">
     <div class="flex justify-center gap-2">
-      <UCalendar v-model="value" />
+      <UCalendar v-model="singleValue" />
     </div>
     <div class="flex items-center gap-4">
       <UCalendar
         v-for="color in colors"
         :key="color"
-        v-model="value"
+        v-model="singleValue"
+        :color="color"
+      />
+    </div>
+    <div class="flex items-center gap-4">
+      <UCalendar
+        v-for="color in colors"
+        :key="color"
+        v-model="multipleValue"
+        type="multiple"
         :color="color"
       />
     </div>
@@ -24,7 +38,7 @@ const value = ref<Date>(new Date())
       <UCalendar
         v-for="size in sizes"
         :key="size"
-        v-model="value"
+        v-model="singleValue"
         :size="size"
       />
     </div>
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 2100116dfa..1bccccdeeb 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue'
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { CalendarRootProps, CalendarRootEmits, CalendarCellTriggerProps } from 'radix-vue'
+import type { DateValue } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/calendar'
@@ -12,13 +13,33 @@ const calendar = tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })
 
 type CalendarVariants = VariantProps<typeof calendar>
 
-export type CalendarProps = CalendarRootProps & {
+interface BaseCalendarProps extends Pick<CalendarRootProps, 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'maxValue' | 'minValue' | 'numberOfMonths' | 'disabled' | 'readonly' | 'initialFocus' | 'isDateDisabled' | 'isDateUnavailable' | 'dir'> {
   color?: CalendarVariants['color']
   size?: CalendarVariants['size']
   class?: any
   ui?: Partial<typeof calendar.slots>
+  /**
+   * The locale to use for formatting and parsing numbers.
+   * @defaultValue UApp.locale.code
+   */
+  locale?: string
+  type?: 'multiple' | 'single'
 }
 
+export interface CalendarMultipleProps extends BaseCalendarProps {
+  modelValue?: [DateValue, DateValue]
+  defaultValue?: [DateValue, DateValue]
+  type?: 'multiple'
+}
+
+export interface CalendarSingleProps extends BaseCalendarProps {
+  modelValue?: DateValue
+  defaultValue?: DateValue
+  type?: 'single'
+}
+
+export type CalendarProps = CalendarMultipleProps | CalendarSingleProps
+
 export interface CalendarEmits extends CalendarRootEmits {}
 
 export interface CalendarSlots {
@@ -32,15 +53,20 @@ export interface CalendarSlots {
 import { useForwardPropsEmits, CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import UButton from './Button.vue'
-// import { useLocale } from '../composables/useLocale'
+import { useLocale } from '../composables/useLocale'
+import type { Direction } from '../types'
 
 const props = withDefaults(defineProps<CalendarProps>(), {
-  fixedWeeks: true
+  fixedWeeks: true,
+  type: 'single'
 })
 const emits = defineEmits<CalendarEmits>()
 defineSlots<CalendarSlots>()
 
-// const { locale, dir } = useLocale()
+const { code: codeLocale, dir: dirLocale } = useLocale()
+const locale = computed(() => props.locale || codeLocale.value)
+const dir = computed(() => (props.dir || dirLocale.value) as Direction)
+
 const _rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'modelValue'), emits)
 
 const ui = computed(() => calendar({
@@ -53,6 +79,8 @@ const ui = computed(() => calendar({
   <CalendarRoot
     v-slot="{ weekDays, grid }"
     :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :locale="locale"
+    :dir="dir"
     fixed-weeks
   >
     <CalendarHeader :class="ui.header({ class: props.ui?.header })">

From 62e3f635a1f1c43f32d48891274a1a1ad2d570b8 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Thu, 14 Nov 2024 00:30:59 +0500
Subject: [PATCH 05/30] feat(Calendar): fix color

---
 src/theme/calendar.ts | 43 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/theme/calendar.ts b/src/theme/calendar.ts
index d34ce1127e..84fb14598b 100644
--- a/src/theme/calendar.ts
+++ b/src/theme/calendar.ts
@@ -1,6 +1,16 @@
 import type { ModuleOptions } from '../module'
 
 export default (options: Required<ModuleOptions>) => {
+  console.log(JSON.stringify({
+    ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
+      headCell: `text-[var(--ui-${color})]`,
+      cellTrigger: `focus-visible:ring-[var(--ui-${color})] data-[selected]:!bg-[var(--ui-error)] data-[today]:bg-[var(--ui-error)]/10`
+    }])),
+    neutral: {
+      cellTrigger: ''
+    }
+  }, null, 2))
+
   return {
     slots: {
       root: 'rounded-[calc(var(--ui-radius)*1.5)]',
@@ -13,16 +23,37 @@ export default (options: Required<ModuleOptions>) => {
       gridBody: 'grid',
       headCell: 'rounded-md text-xs',
       cell: 'relative text-center text-sm',
-      cellTrigger: ['relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:text-[var(--ui-bg)] hover:bg-[var(--ui-bg-elevated)]', options.theme.transitions && 'transition-[color,opacity] duration-200']
+      cellTrigger: ['relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:text-[var(--ui-bg)]', options.theme.transitions && 'transition-[color,opacity] duration-200']
     },
     variants: {
       color: {
-        ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
-          headCell: `text-[var(--ui-${color})]`,
-          cellTrigger: `focus-visible:ring-[var(--ui-${color})] data-[selected]:!bg-[var(--ui-${color})] data-[today]:bg-[var(--ui-${color})]/10`
-        }])),
+        primary: {
+          headCell: 'text-[var(--ui-primary)]',
+          cellTrigger: 'focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/10'
+        },
+        secondary: {
+          headCell: 'text-[var(--ui-secondary)]',
+          cellTrigger: 'focus-visible:ring-[var(--ui-secondary)] data-[selected]:!bg-[var(--ui-secondary)] data-[today]:bg-[var(--ui-secondary)]/20 hover:bg-[var(--ui-secondary)]/10'
+        },
+        success: {
+          headCell: 'text-[var(--ui-success)]',
+          cellTrigger: 'focus-visible:ring-[var(--ui-success)] data-[selected]:!bg-[var(--ui-success)] data-[today]:bg-[var(--ui-success)]/20 hover:bg-[var(--ui-success)]/10'
+        },
+        info: {
+          headCell: 'text-[var(--ui-info)]',
+          cellTrigger: 'focus-visible:ring-[var(--ui-info)] data-[selected]:!bg-[var(--ui-info)] data-[today]:bg-[var(--ui-info)]/20 hover:bg-[var(--ui-info)]/10'
+        },
+        warning: {
+          headCell: 'text-[var(--ui-warning)]',
+          cellTrigger: 'focus-visible:ring-[var(--ui-warning)] data-[selected]:!bg-[var(--ui-warning)] data-[today]:bg-[var(--ui-warning)]/20 hover:bg-[var(--ui-warning)]/10'
+        },
+        error: {
+          headCell: 'text-[var(--ui-error)]',
+          cellTrigger: 'focus-visible:ring-[var(--ui-error)] data-[selected]:!bg-[var(--ui-error)] data-[today]:bg-[var(--ui-error)]/20 hover:bg-[var(--ui-error)]/10'
+        },
         neutral: {
-          cellTrigger: ''
+          headCell: 'text-[var(--ui-error)]',
+          cellTrigger: 'focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:!bg-[var(--ui-bg-inverted)] data-[today]:bg-[var(--ui-bg-inverted)]/20 hover:bg-[var(--ui-bg-inverted)]/10'
         }
       },
       size: {

From 975df203fd84822578cf00cdf81bd724ab9d5ca7 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Thu, 14 Nov 2024 00:32:37 +0500
Subject: [PATCH 06/30] feat(Calendar): natural headCell

---
 src/theme/calendar.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/calendar.ts b/src/theme/calendar.ts
index 84fb14598b..bb9c66ccbd 100644
--- a/src/theme/calendar.ts
+++ b/src/theme/calendar.ts
@@ -52,7 +52,7 @@ export default (options: Required<ModuleOptions>) => {
           cellTrigger: 'focus-visible:ring-[var(--ui-error)] data-[selected]:!bg-[var(--ui-error)] data-[today]:bg-[var(--ui-error)]/20 hover:bg-[var(--ui-error)]/10'
         },
         neutral: {
-          headCell: 'text-[var(--ui-error)]',
+          headCell: 'text-[var(--ui-bg-inverted)]',
           cellTrigger: 'focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:!bg-[var(--ui-bg-inverted)] data-[today]:bg-[var(--ui-bg-inverted)]/20 hover:bg-[var(--ui-bg-inverted)]/10'
         }
       },

From 5a5680d23b07bbd46e4d00f7ccd75bb8c59bfb73 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Thu, 14 Nov 2024 00:35:52 +0500
Subject: [PATCH 07/30] feat(Calendar): playground

---
 playground/app/pages/components/calendar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/playground/app/pages/components/calendar.vue b/playground/app/pages/components/calendar.vue
index 9bb409dae7..6e84289982 100644
--- a/playground/app/pages/components/calendar.vue
+++ b/playground/app/pages/components/calendar.vue
@@ -7,8 +7,8 @@ const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.varia
 
 const singleValue = ref(new Date())
 const multipleValue = ref([
-  startOfWeek(now(getLocalTimeZone()), 'en').toDate(),
-  endOfWeek(now(getLocalTimeZone()), 'en').toDate()
+  startOfWeek(now(getLocalTimeZone()), 'en').add({ weeks: 1 }).toDate(),
+  endOfWeek(now(getLocalTimeZone()), 'en').add({ weeks: 1 }).toDate()
 ])
 </script>
 

From e0f40fa08f2441c17cdf1ce81626813432974313 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Thu, 14 Nov 2024 01:32:27 +0500
Subject: [PATCH 08/30] feat(Calendar): update

---
 playground/app/pages/components/calendar.vue |  8 ++---
 src/runtime/components/Calendar.vue          | 30 +++++++++-------
 src/theme/calendar.ts                        | 38 +++-----------------
 3 files changed, 25 insertions(+), 51 deletions(-)

diff --git a/playground/app/pages/components/calendar.vue b/playground/app/pages/components/calendar.vue
index 6e84289982..cfc06bbdce 100644
--- a/playground/app/pages/components/calendar.vue
+++ b/playground/app/pages/components/calendar.vue
@@ -5,10 +5,10 @@ import theme from '#build/ui/calendar'
 const colors = Object.keys(theme.variants.color) as Array<keyof typeof theme.variants.color>
 const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 
-const singleValue = ref(new Date())
+const singleValue = ref(now(getLocalTimeZone()).add({ days: -2 }))
 const multipleValue = ref([
-  startOfWeek(now(getLocalTimeZone()), 'en').add({ weeks: 1 }).toDate(),
-  endOfWeek(now(getLocalTimeZone()), 'en').add({ weeks: 1 }).toDate()
+  startOfWeek(now(getLocalTimeZone()), 'en').add({ days: -2 }),
+  endOfWeek(now(getLocalTimeZone()), 'en').add({ days: -2 })
 ])
 </script>
 
@@ -30,8 +30,8 @@ const multipleValue = ref([
         v-for="color in colors"
         :key="color"
         v-model="multipleValue"
-        type="multiple"
         :color="color"
+        range
       />
     </div>
     <div class="flex items-center gap-4">
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 1bccccdeeb..64e165b443 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -23,22 +23,22 @@ interface BaseCalendarProps extends Pick<CalendarRootProps, 'weekStartsOn' | 'we
    * @defaultValue UApp.locale.code
    */
   locale?: string
-  type?: 'multiple' | 'single'
-}
-
-export interface CalendarMultipleProps extends BaseCalendarProps {
-  modelValue?: [DateValue, DateValue]
-  defaultValue?: [DateValue, DateValue]
-  type?: 'multiple'
+  range: boolean
 }
 
 export interface CalendarSingleProps extends BaseCalendarProps {
   modelValue?: DateValue
   defaultValue?: DateValue
-  type?: 'single'
+  range: false
+}
+
+export interface CalendarRangeProps extends BaseCalendarProps {
+  modelValue?: [DateValue, DateValue]
+  defaultValue?: [DateValue, DateValue]
+  range: true
 }
 
-export type CalendarProps = CalendarMultipleProps | CalendarSingleProps
+export type CalendarProps = CalendarSingleProps | CalendarRangeProps
 
 export interface CalendarEmits extends CalendarRootEmits {}
 
@@ -57,8 +57,8 @@ import { useLocale } from '../composables/useLocale'
 import type { Direction } from '../types'
 
 const props = withDefaults(defineProps<CalendarProps>(), {
-  fixedWeeks: true,
-  type: 'single'
+  range: false,
+  fixedWeeks: true
 })
 const emits = defineEmits<CalendarEmits>()
 defineSlots<CalendarSlots>()
@@ -67,7 +67,7 @@ const { code: codeLocale, dir: dirLocale } = useLocale()
 const locale = computed(() => props.locale || codeLocale.value)
 const dir = computed(() => (props.dir || dirLocale.value) as Direction)
 
-const _rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'modelValue'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'modelValue', 'disabled', 'readonly', 'fixedWeeks', 'initialFocus', 'isDateDisabled', 'isDateUnavailable', 'maxValue', 'minValue', 'numberOfMonths', 'weekdayFormat', 'weekStartsOn'), emits)
 
 const ui = computed(() => calendar({
   color: props.color,
@@ -76,12 +76,16 @@ const ui = computed(() => calendar({
 </script>
 
 <template>
+  <div v-if="props.range">
+    todo
+  </div>
   <CalendarRoot
+    v-else
+    v-bind="rootProps"
     v-slot="{ weekDays, grid }"
     :class="ui.root({ class: [props.class, props.ui?.root] })"
     :locale="locale"
     :dir="dir"
-    fixed-weeks
   >
     <CalendarHeader :class="ui.header({ class: props.ui?.header })">
       <CalendarPrev as-child>
diff --git a/src/theme/calendar.ts b/src/theme/calendar.ts
index bb9c66ccbd..1da533c6ee 100644
--- a/src/theme/calendar.ts
+++ b/src/theme/calendar.ts
@@ -1,16 +1,6 @@
 import type { ModuleOptions } from '../module'
 
 export default (options: Required<ModuleOptions>) => {
-  console.log(JSON.stringify({
-    ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
-      headCell: `text-[var(--ui-${color})]`,
-      cellTrigger: `focus-visible:ring-[var(--ui-${color})] data-[selected]:!bg-[var(--ui-error)] data-[today]:bg-[var(--ui-error)]/10`
-    }])),
-    neutral: {
-      cellTrigger: ''
-    }
-  }, null, 2))
-
   return {
     slots: {
       root: 'rounded-[calc(var(--ui-radius)*1.5)]',
@@ -27,30 +17,10 @@ export default (options: Required<ModuleOptions>) => {
     },
     variants: {
       color: {
-        primary: {
-          headCell: 'text-[var(--ui-primary)]',
-          cellTrigger: 'focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/10'
-        },
-        secondary: {
-          headCell: 'text-[var(--ui-secondary)]',
-          cellTrigger: 'focus-visible:ring-[var(--ui-secondary)] data-[selected]:!bg-[var(--ui-secondary)] data-[today]:bg-[var(--ui-secondary)]/20 hover:bg-[var(--ui-secondary)]/10'
-        },
-        success: {
-          headCell: 'text-[var(--ui-success)]',
-          cellTrigger: 'focus-visible:ring-[var(--ui-success)] data-[selected]:!bg-[var(--ui-success)] data-[today]:bg-[var(--ui-success)]/20 hover:bg-[var(--ui-success)]/10'
-        },
-        info: {
-          headCell: 'text-[var(--ui-info)]',
-          cellTrigger: 'focus-visible:ring-[var(--ui-info)] data-[selected]:!bg-[var(--ui-info)] data-[today]:bg-[var(--ui-info)]/20 hover:bg-[var(--ui-info)]/10'
-        },
-        warning: {
-          headCell: 'text-[var(--ui-warning)]',
-          cellTrigger: 'focus-visible:ring-[var(--ui-warning)] data-[selected]:!bg-[var(--ui-warning)] data-[today]:bg-[var(--ui-warning)]/20 hover:bg-[var(--ui-warning)]/10'
-        },
-        error: {
-          headCell: 'text-[var(--ui-error)]',
-          cellTrigger: 'focus-visible:ring-[var(--ui-error)] data-[selected]:!bg-[var(--ui-error)] data-[today]:bg-[var(--ui-error)]/20 hover:bg-[var(--ui-error)]/10'
-        },
+        ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
+          headCell: `text-[var(--ui-${color})]`,
+          cellTrigger: `focus-visible:ring-[var(--ui-${color})] data-[selected]:!bg-[var(--ui-${color})] data-[today]:bg-[var(--ui-${color})]/10`
+        }])),
         neutral: {
           headCell: 'text-[var(--ui-bg-inverted)]',
           cellTrigger: 'focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:!bg-[var(--ui-bg-inverted)] data-[today]:bg-[var(--ui-bg-inverted)]/20 hover:bg-[var(--ui-bg-inverted)]/10'

From 2a12716c12108eea8fdd323006e1de1b36287d46 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Thu, 14 Nov 2024 01:50:36 +0500
Subject: [PATCH 09/30] feat(Calendar): update

---
 playground/app/pages/components/calendar.vue |  8 +-
 src/runtime/components/Calendar.vue          | 85 +++++++++++++++++---
 2 files changed, 80 insertions(+), 13 deletions(-)

diff --git a/playground/app/pages/components/calendar.vue b/playground/app/pages/components/calendar.vue
index cfc06bbdce..3e44ad63f8 100644
--- a/playground/app/pages/components/calendar.vue
+++ b/playground/app/pages/components/calendar.vue
@@ -6,10 +6,10 @@ const colors = Object.keys(theme.variants.color) as Array<keyof typeof theme.var
 const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 
 const singleValue = ref(now(getLocalTimeZone()).add({ days: -2 }))
-const multipleValue = ref([
-  startOfWeek(now(getLocalTimeZone()), 'en').add({ days: -2 }),
-  endOfWeek(now(getLocalTimeZone()), 'en').add({ days: -2 })
-])
+const multipleValue = reactive({
+  start: startOfWeek(now(getLocalTimeZone()), 'en').add({ weeks: 1 }),
+  end: endOfWeek(now(getLocalTimeZone()), 'en').add({ weeks: 1 })
+})
 </script>
 
 <template>
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 64e165b443..fd8b9cab46 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed } from 'vue'
 import { tv, type VariantProps } from 'tailwind-variants'
-import type { CalendarRootProps, CalendarRootEmits, CalendarCellTriggerProps } from 'radix-vue'
+import type { CalendarRootProps, CalendarRootEmits, CalendarCellTriggerProps, DateRange } from 'radix-vue'
 import type { DateValue } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
@@ -33,8 +33,8 @@ export interface CalendarSingleProps extends BaseCalendarProps {
 }
 
 export interface CalendarRangeProps extends BaseCalendarProps {
-  modelValue?: [DateValue, DateValue]
-  defaultValue?: [DateValue, DateValue]
+  modelValue?: DateRange
+  defaultValue?: DateRange
   range: true
 }
 
@@ -50,7 +50,10 @@ export interface CalendarSlots {
 </script>
 
 <script setup lang="ts">
-import { useForwardPropsEmits, CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot } from 'radix-vue'
+import {
+  useForwardPropsEmits, CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot,
+  RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNext, RangeCalendarPrev, RangeCalendarRoot
+} from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
 import UButton from './Button.vue'
 import { useLocale } from '../composables/useLocale'
@@ -67,7 +70,7 @@ const { code: codeLocale, dir: dirLocale } = useLocale()
 const locale = computed(() => props.locale || codeLocale.value)
 const dir = computed(() => (props.dir || dirLocale.value) as Direction)
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'defaultValue', 'modelValue', 'disabled', 'readonly', 'fixedWeeks', 'initialFocus', 'isDateDisabled', 'isDateUnavailable', 'maxValue', 'minValue', 'numberOfMonths', 'weekdayFormat', 'weekStartsOn'), emits)
+const baseRootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'disabled', 'readonly', 'fixedWeeks', 'initialFocus', 'isDateDisabled', 'isDateUnavailable', 'maxValue', 'minValue', 'numberOfMonths', 'weekdayFormat', 'weekStartsOn'), emits)
 
 const ui = computed(() => calendar({
   color: props.color,
@@ -76,13 +79,77 @@ const ui = computed(() => calendar({
 </script>
 
 <template>
-  <div v-if="props.range">
-    todo
-  </div>
+  <RangeCalendarRoot
+    v-if="props.range"
+    v-slot="{ weekDays, grid }"
+    v-bind="baseRootProps"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :locale="locale"
+    :dir="dir"
+  >
+    <RangeCalendarHeader :class="ui.header({ class: props.ui?.header })">
+      <RangeCalendarPrev as-child>
+        <UButton :icon="appConfig.ui.icons.chevronLeft" :size="props.size" color="neutral" variant="ghost" />
+      </RangeCalendarPrev>
+      <RangeCalendarHeading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })">
+        <slot name="heading" :value="headingValue">
+          {{ headingValue }}
+        </slot>
+      </RangeCalendarHeading>
+      <RangeCalendarNext as-child>
+        <UButton :icon="appConfig.ui.icons.chevronRight" :size="props.size" color="neutral" variant="ghost" />
+      </RangeCalendarNext>
+    </RangeCalendarHeader>
+    <div :class="ui.body({ class: props.ui?.body })">
+      <RangeCalendarGrid
+        v-for="month in grid"
+        :key="month.value.toString()"
+        :class="ui.grid({ class: props.ui?.grid })"
+      >
+        <RangeCalendarGridHead>
+          <RangeCalendarGridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
+            <RangeCalendarHeadCell
+              v-for="day in weekDays"
+              :key="day"
+              :class="ui.headCell({ class: props.ui?.headCell })"
+            >
+              <slot name="week-day" :day="day">
+                {{ day }}
+              </slot>
+            </RangeCalendarHeadCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridHead>
+        <RangeCalendarGridBody :class="ui.gridBody({ class: props.ui?.gridBody })">
+          <RangeCalendarGridRow
+            v-for="(weekDates, index) in month.rows"
+            :key="`weekDate-${index}`"
+            :class="ui.gridRow({ class: props.ui?.gridRow })"
+          >
+            <RangeCalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+              :class="ui.cell({ class: props.ui?.cell })"
+            >
+              <RangeCalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+                :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
+              >
+                <slot name="day" :day="weekDate">
+                  {{ weekDate.day }}
+                </slot>
+              </RangeCalendarCellTrigger>
+            </RangeCalendarCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridBody>
+      </RangeCalendarGrid>
+    </div>
+  </RangeCalendarRoot>
   <CalendarRoot
     v-else
-    v-bind="rootProps"
     v-slot="{ weekDays, grid }"
+    v-bind="baseRootProps"
     :class="ui.root({ class: [props.class, props.ui?.root] })"
     :locale="locale"
     :dir="dir"

From 20532bf87e07fdc5cbdb097806f610149940fc72 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Thu, 14 Nov 2024 22:24:14 +0500
Subject: [PATCH 10/30] feat(Calendar): component

---
 src/runtime/components/Calendar.vue | 142 +++++++---------------------
 1 file changed, 33 insertions(+), 109 deletions(-)

diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index fd8b9cab46..f4d502249d 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -13,16 +13,11 @@ const calendar = tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })
 
 type CalendarVariants = VariantProps<typeof calendar>
 
-interface BaseCalendarProps extends Pick<CalendarRootProps, 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'maxValue' | 'minValue' | 'numberOfMonths' | 'disabled' | 'readonly' | 'initialFocus' | 'isDateDisabled' | 'isDateUnavailable' | 'dir'> {
+interface BaseCalendarProps extends Pick<CalendarRootProps, 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'maxValue' | 'minValue' | 'numberOfMonths' | 'disabled' | 'readonly' | 'initialFocus' | 'isDateDisabled' | 'isDateUnavailable'> {
   color?: CalendarVariants['color']
   size?: CalendarVariants['size']
   class?: any
   ui?: Partial<typeof calendar.slots>
-  /**
-   * The locale to use for formatting and parsing numbers.
-   * @defaultValue UApp.locale.code
-   */
-  locale?: string
   range: boolean
 }
 
@@ -49,15 +44,12 @@ export interface CalendarSlots {
 }
 </script>
 
-<script setup lang="ts">
-import {
-  useForwardPropsEmits, CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNext, CalendarPrev, CalendarRoot,
-  RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNext, RangeCalendarPrev, RangeCalendarRoot
-} from 'radix-vue'
+<script setup lang="ts" generic="T extends boolean">
+import { useForwardPropsEmits } from 'radix-vue'
+import { Calendar as SingleCalendar, RangeCalendar } from 'radix-vue/namespaced'
 import { reactivePick } from '@vueuse/core'
 import UButton from './Button.vue'
 import { useLocale } from '../composables/useLocale'
-import type { Direction } from '../types'
 
 const props = withDefaults(defineProps<CalendarProps>(), {
   range: false,
@@ -66,9 +58,7 @@ const props = withDefaults(defineProps<CalendarProps>(), {
 const emits = defineEmits<CalendarEmits>()
 defineSlots<CalendarSlots>()
 
-const { code: codeLocale, dir: dirLocale } = useLocale()
-const locale = computed(() => props.locale || codeLocale.value)
-const dir = computed(() => (props.dir || dirLocale.value) as Direction)
+const { code: locale, dir } = useLocale()
 
 const baseRootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'disabled', 'readonly', 'fixedWeeks', 'initialFocus', 'isDateDisabled', 'isDateUnavailable', 'maxValue', 'minValue', 'numberOfMonths', 'weekdayFormat', 'weekStartsOn'), emits)
 
@@ -76,106 +66,40 @@ const ui = computed(() => calendar({
   color: props.color,
   size: props.size
 }))
+
+const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
 </script>
 
 <template>
-  <RangeCalendarRoot
-    v-if="props.range"
-    v-slot="{ weekDays, grid }"
-    v-bind="baseRootProps"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
-    :locale="locale"
-    :dir="dir"
-  >
-    <RangeCalendarHeader :class="ui.header({ class: props.ui?.header })">
-      <RangeCalendarPrev as-child>
-        <UButton :icon="appConfig.ui.icons.chevronLeft" :size="props.size" color="neutral" variant="ghost" />
-      </RangeCalendarPrev>
-      <RangeCalendarHeading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })">
-        <slot name="heading" :value="headingValue">
-          {{ headingValue }}
-        </slot>
-      </RangeCalendarHeading>
-      <RangeCalendarNext as-child>
-        <UButton :icon="appConfig.ui.icons.chevronRight" :size="props.size" color="neutral" variant="ghost" />
-      </RangeCalendarNext>
-    </RangeCalendarHeader>
-    <div :class="ui.body({ class: props.ui?.body })">
-      <RangeCalendarGrid
-        v-for="month in grid"
-        :key="month.value.toString()"
-        :class="ui.grid({ class: props.ui?.grid })"
-      >
-        <RangeCalendarGridHead>
-          <RangeCalendarGridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
-            <RangeCalendarHeadCell
-              v-for="day in weekDays"
-              :key="day"
-              :class="ui.headCell({ class: props.ui?.headCell })"
-            >
-              <slot name="week-day" :day="day">
-                {{ day }}
-              </slot>
-            </RangeCalendarHeadCell>
-          </RangeCalendarGridRow>
-        </RangeCalendarGridHead>
-        <RangeCalendarGridBody :class="ui.gridBody({ class: props.ui?.gridBody })">
-          <RangeCalendarGridRow
-            v-for="(weekDates, index) in month.rows"
-            :key="`weekDate-${index}`"
-            :class="ui.gridRow({ class: props.ui?.gridRow })"
-          >
-            <RangeCalendarCell
-              v-for="weekDate in weekDates"
-              :key="weekDate.toString()"
-              :date="weekDate"
-              :class="ui.cell({ class: props.ui?.cell })"
-            >
-              <RangeCalendarCellTrigger
-                :day="weekDate"
-                :month="month.value"
-                :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
-              >
-                <slot name="day" :day="weekDate">
-                  {{ weekDate.day }}
-                </slot>
-              </RangeCalendarCellTrigger>
-            </RangeCalendarCell>
-          </RangeCalendarGridRow>
-        </RangeCalendarGridBody>
-      </RangeCalendarGrid>
-    </div>
-  </RangeCalendarRoot>
-  <CalendarRoot
-    v-else
+  <Calendar.Root
     v-slot="{ weekDays, grid }"
     v-bind="baseRootProps"
     :class="ui.root({ class: [props.class, props.ui?.root] })"
     :locale="locale"
     :dir="dir"
   >
-    <CalendarHeader :class="ui.header({ class: props.ui?.header })">
-      <CalendarPrev as-child>
+    <Calendar.Header :class="ui.header({ class: props.ui?.header })">
+      <Calendar.Prev as-child>
         <UButton :icon="appConfig.ui.icons.chevronLeft" :size="props.size" color="neutral" variant="ghost" />
-      </CalendarPrev>
-      <CalendarHeading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })">
+      </Calendar.Prev>
+      <Calendar.Heading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })">
         <slot name="heading" :value="headingValue">
           {{ headingValue }}
         </slot>
-      </CalendarHeading>
-      <CalendarNext as-child>
+      </Calendar.Heading>
+      <Calendar.Next as-child>
         <UButton :icon="appConfig.ui.icons.chevronRight" :size="props.size" color="neutral" variant="ghost" />
-      </CalendarNext>
-    </CalendarHeader>
+      </Calendar.Next>
+    </Calendar.Header>
     <div :class="ui.body({ class: props.ui?.body })">
-      <CalendarGrid
+      <Calendar.Grid
         v-for="month in grid"
         :key="month.value.toString()"
         :class="ui.grid({ class: props.ui?.grid })"
       >
-        <CalendarGridHead>
-          <CalendarGridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
-            <CalendarHeadCell
+        <Calendar.GridHead>
+          <Calendar.GridRow :class="ui.gridWeekDaysRow({ class: props.ui?.gridWeekDaysRow })">
+            <Calendar.HeadCell
               v-for="day in weekDays"
               :key="day"
               :class="ui.headCell({ class: props.ui?.headCell })"
@@ -183,22 +107,22 @@ const ui = computed(() => calendar({
               <slot name="week-day" :day="day">
                 {{ day }}
               </slot>
-            </CalendarHeadCell>
-          </CalendarGridRow>
-        </CalendarGridHead>
-        <CalendarGridBody :class="ui.gridBody({ class: props.ui?.gridBody })">
-          <CalendarGridRow
+            </Calendar.HeadCell>
+          </Calendar.GridRow>
+        </Calendar.GridHead>
+        <Calendar.GridBody :class="ui.gridBody({ class: props.ui?.gridBody })">
+          <Calendar.GridRow
             v-for="(weekDates, index) in month.rows"
             :key="`weekDate-${index}`"
             :class="ui.gridRow({ class: props.ui?.gridRow })"
           >
-            <CalendarCell
+            <Calendar.Cell
               v-for="weekDate in weekDates"
               :key="weekDate.toString()"
               :date="weekDate"
               :class="ui.cell({ class: props.ui?.cell })"
             >
-              <CalendarCellTrigger
+              <Calendar.CellTrigger
                 :day="weekDate"
                 :month="month.value"
                 :class="ui.cellTrigger({ class: props.ui?.cellTrigger })"
@@ -206,11 +130,11 @@ const ui = computed(() => calendar({
                 <slot name="day" :day="weekDate">
                   {{ weekDate.day }}
                 </slot>
-              </CalendarCellTrigger>
-            </CalendarCell>
-          </CalendarGridRow>
-        </CalendarGridBody>
-      </CalendarGrid>
+              </Calendar.CellTrigger>
+            </Calendar.Cell>
+          </Calendar.GridRow>
+        </Calendar.GridBody>
+      </Calendar.Grid>
     </div>
-  </CalendarRoot>
+  </Calendar.Root>
 </template>

From f7e58c979a5fb9f34243380a2b7959ed7a69a36b Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Fri, 15 Nov 2024 13:36:14 +0500
Subject: [PATCH 11/30] feat(Calendar): style

---
 playground/app/pages/components/calendar.vue | 25 +-------------------
 src/runtime/components/Calendar.vue          | 18 +++++++++++++-
 src/theme/calendar.ts                        |  8 +++----
 3 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/playground/app/pages/components/calendar.vue b/playground/app/pages/components/calendar.vue
index 3e44ad63f8..127f89a0e8 100644
--- a/playground/app/pages/components/calendar.vue
+++ b/playground/app/pages/components/calendar.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
 import { startOfWeek, endOfWeek, now, getLocalTimeZone } from '@internationalized/date'
-import theme from '#build/ui/calendar'
-
-const colors = Object.keys(theme.variants.color) as Array<keyof typeof theme.variants.color>
-const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 
 const singleValue = ref(now(getLocalTimeZone()).add({ days: -2 }))
 const multipleValue = reactive({
@@ -17,30 +13,11 @@ const multipleValue = reactive({
     <div class="flex justify-center gap-2">
       <UCalendar v-model="singleValue" />
     </div>
-    <div class="flex items-center gap-4">
-      <UCalendar
-        v-for="color in colors"
-        :key="color"
-        v-model="singleValue"
-        :color="color"
-      />
-    </div>
-    <div class="flex items-center gap-4">
+    <div class="flex justify-center gap-2">
       <UCalendar
-        v-for="color in colors"
-        :key="color"
         v-model="multipleValue"
-        :color="color"
         range
       />
     </div>
-    <div class="flex items-center gap-4">
-      <UCalendar
-        v-for="size in sizes"
-        :key="size"
-        v-model="singleValue"
-        :size="size"
-      />
-    </div>
   </div>
 </template>
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index f4d502249d..24b4727144 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -19,6 +19,7 @@ interface BaseCalendarProps extends Pick<CalendarRootProps, 'weekStartsOn' | 'we
   class?: any
   ui?: Partial<typeof calendar.slots>
   range: boolean
+  yearControls?: boolean
 }
 
 export interface CalendarSingleProps extends BaseCalendarProps {
@@ -53,7 +54,8 @@ import { useLocale } from '../composables/useLocale'
 
 const props = withDefaults(defineProps<CalendarProps>(), {
   range: false,
-  fixedWeeks: true
+  fixedWeeks: true,
+  yearControls: true
 })
 const emits = defineEmits<CalendarEmits>()
 defineSlots<CalendarSlots>()
@@ -67,6 +69,14 @@ const ui = computed(() => calendar({
   size: props.size
 }))
 
+function paginateYear(date: DateValue, sign: -1 | 1) {
+  if (sign === -1) {
+    return date.subtract({ years: 1 })
+  }
+
+  return date.add({ years: 1 })
+}
+
 const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
 </script>
 
@@ -79,6 +89,9 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
     :dir="dir"
   >
     <Calendar.Header :class="ui.header({ class: props.ui?.header })">
+      <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" as-child>
+        <UButton :icon="appConfig.ui.icons.chevronDoubleLeft" :size="props.size" color="neutral" variant="ghost" />
+      </Calendar.Prev>
       <Calendar.Prev as-child>
         <UButton :icon="appConfig.ui.icons.chevronLeft" :size="props.size" color="neutral" variant="ghost" />
       </Calendar.Prev>
@@ -90,6 +103,9 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
       <Calendar.Next as-child>
         <UButton :icon="appConfig.ui.icons.chevronRight" :size="props.size" color="neutral" variant="ghost" />
       </Calendar.Next>
+      <Calendar.Next v-if="props.yearControls" :next-page="(date: DateValue) => paginateYear(date, 1)" as-child>
+        <UButton :icon="appConfig.ui.icons.chevronDoubleRight" :size="props.size" color="neutral" variant="ghost" />
+      </Calendar.Next>
     </Calendar.Header>
     <div :class="ui.body({ class: props.ui?.body })">
       <Calendar.Grid
diff --git a/src/theme/calendar.ts b/src/theme/calendar.ts
index 1da533c6ee..5887b26962 100644
--- a/src/theme/calendar.ts
+++ b/src/theme/calendar.ts
@@ -6,24 +6,24 @@ export default (options: Required<ModuleOptions>) => {
       root: 'rounded-[calc(var(--ui-radius)*1.5)]',
       header: 'flex items-center justify-between',
       body: 'flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0',
-      heading: 'text-sm font-medium',
+      heading: 'text-center text-sm font-medium truncate',
       grid: 'w-full border-collapse select-none space-y-1',
       gridRow: 'grid grid-cols-7',
       gridWeekDaysRow: 'mb-1 grid w-full grid-cols-7',
       gridBody: 'grid',
       headCell: 'rounded-md text-xs',
       cell: 'relative text-center text-sm',
-      cellTrigger: ['relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:text-[var(--ui-bg)]', options.theme.transitions && 'transition-[color,opacity] duration-200']
+      cellTrigger: ['m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through', options.theme.transitions && 'transition-[color,opacity] duration-200']
     },
     variants: {
       color: {
         ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
           headCell: `text-[var(--ui-${color})]`,
-          cellTrigger: `focus-visible:ring-[var(--ui-${color})] data-[selected]:!bg-[var(--ui-${color})] data-[today]:bg-[var(--ui-${color})]/10`
+          cellTrigger: `focus-visible:ring-[var(--ui-${color})] data-[selected]:!bg-[var(--ui-${color})] data-[today]:text-[var(--ui-${color})] data-[highlighted]:bg-[var(--ui-${color})]/20 hover:bg-[var(--ui-${color})]/20`
         }])),
         neutral: {
           headCell: 'text-[var(--ui-bg-inverted)]',
-          cellTrigger: 'focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:!bg-[var(--ui-bg-inverted)] data-[today]:bg-[var(--ui-bg-inverted)]/20 hover:bg-[var(--ui-bg-inverted)]/10'
+          cellTrigger: 'focus-visible:ring-[var(--ui-border-inverted)] data-[selected]:!bg-[var(--ui-bg-inverted)] data-[today]:text-[var(--ui-bg-inverted)] data-[highlighted]:bg-[var(--ui-bg-inverted)]/20 hover:bg-[var(--ui-bg-inverted)]/10'
         }
       },
       size: {

From 66f807872887159b847e2e50b0ca3778a6c6c26e Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Fri, 15 Nov 2024 14:13:19 +0500
Subject: [PATCH 12/30] feat(Calendar): to native `Date`

---
 playground/app/pages/components/calendar.vue | 13 ++-----
 src/runtime/components/Calendar.vue          | 39 ++++++++++++++++----
 src/runtime/types/date.ts                    | 10 +++++
 src/runtime/utils/date.ts                    |  0
 4 files changed, 45 insertions(+), 17 deletions(-)
 create mode 100644 src/runtime/types/date.ts
 create mode 100644 src/runtime/utils/date.ts

diff --git a/playground/app/pages/components/calendar.vue b/playground/app/pages/components/calendar.vue
index 127f89a0e8..b734122186 100644
--- a/playground/app/pages/components/calendar.vue
+++ b/playground/app/pages/components/calendar.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { startOfWeek, endOfWeek, now, getLocalTimeZone } from '@internationalized/date'
-
-const singleValue = ref(now(getLocalTimeZone()).add({ days: -2 }))
+const singleValue = ref(new Date('2023-09-01'))
 const multipleValue = reactive({
-  start: startOfWeek(now(getLocalTimeZone()), 'en').add({ weeks: 1 }),
-  end: endOfWeek(now(getLocalTimeZone()), 'en').add({ weeks: 1 })
+  start: new Date('2023-09-01'),
+  end: new Date('2023-09-07')
 })
 </script>
 
@@ -14,10 +12,7 @@ const multipleValue = reactive({
       <UCalendar v-model="singleValue" />
     </div>
     <div class="flex justify-center gap-2">
-      <UCalendar
-        v-model="multipleValue"
-        range
-      />
+      <UCalendar v-model="multipleValue" range />
     </div>
   </div>
 </template>
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 24b4727144..180c85e636 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -1,11 +1,12 @@
 <script lang="ts">
 import { computed } from 'vue'
 import { tv, type VariantProps } from 'tailwind-variants'
-import type { CalendarRootProps, CalendarRootEmits, CalendarCellTriggerProps, DateRange } from 'radix-vue'
+import type { CalendarRootProps, CalendarCellTriggerProps } from 'radix-vue'
 import type { DateValue } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/calendar'
+import type { DateRange } from '../types/date'
 
 const appConfig = _appConfig as AppConfig & { ui: { calendar: Partial<typeof theme> } }
 
@@ -13,18 +14,38 @@ const calendar = tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })
 
 type CalendarVariants = VariantProps<typeof calendar>
 
-interface BaseCalendarProps extends Pick<CalendarRootProps, 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'maxValue' | 'minValue' | 'numberOfMonths' | 'disabled' | 'readonly' | 'initialFocus' | 'isDateDisabled' | 'isDateUnavailable'> {
+interface BaseCalendarProps extends Pick<CalendarRootProps, 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'disabled' | 'readonly' | 'initialFocus' | 'isDateDisabled' | 'isDateUnavailable'> {
+  /**
+   * The color of the calendar
+   */
   color?: CalendarVariants['color']
+  /**
+   * The size of the calendar
+   */
   size?: CalendarVariants['size']
-  class?: any
-  ui?: Partial<typeof calendar.slots>
+  /**
+   * Is this a range calendar
+   */
   range: boolean
+  /**
+   * Show year controls
+   */
   yearControls?: boolean
+  /**
+   * The maximum date that can be selected
+   */
+  maxValue?: Date
+  /**
+   * The minimum date that can be selected
+   */
+  minValue?: Date
+  class?: any
+  ui?: Partial<typeof calendar.slots>
 }
 
 export interface CalendarSingleProps extends BaseCalendarProps {
-  modelValue?: DateValue
-  defaultValue?: DateValue
+  modelValue?: Date
+  defaultValue?: Date
   range: false
 }
 
@@ -36,7 +57,9 @@ export interface CalendarRangeProps extends BaseCalendarProps {
 
 export type CalendarProps = CalendarSingleProps | CalendarRangeProps
 
-export interface CalendarEmits extends CalendarRootEmits {}
+export interface CalendarEmits {
+  (e: 'update:modelValue', value: Date | DateRange): void
+}
 
 export interface CalendarSlots {
   'heading': (props: { value: string }) => any
@@ -62,7 +85,7 @@ defineSlots<CalendarSlots>()
 
 const { code: locale, dir } = useLocale()
 
-const baseRootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'disabled', 'readonly', 'fixedWeeks', 'initialFocus', 'isDateDisabled', 'isDateUnavailable', 'maxValue', 'minValue', 'numberOfMonths', 'weekdayFormat', 'weekStartsOn'), emits)
+const baseRootProps = useForwardPropsEmits(reactivePick(props, 'disabled', 'readonly', 'fixedWeeks', 'initialFocus', 'isDateDisabled', 'isDateUnavailable', 'maxValue', 'minValue', 'numberOfMonths', 'weekdayFormat', 'weekStartsOn'), emits)
 
 const ui = computed(() => calendar({
   color: props.color,
diff --git a/src/runtime/types/date.ts b/src/runtime/types/date.ts
new file mode 100644
index 0000000000..5ea7fb7b78
--- /dev/null
+++ b/src/runtime/types/date.ts
@@ -0,0 +1,10 @@
+export interface DateRange {
+  /**
+   * The start of the range
+   */
+  start: Date
+  /**
+   * The end of the range
+   */
+  end: Date
+}
diff --git a/src/runtime/utils/date.ts b/src/runtime/utils/date.ts
new file mode 100644
index 0000000000..e69de29bb2

From 4b350595d4e996ead92c8c73197af821db026028 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Fri, 15 Nov 2024 14:54:01 +0500
Subject: [PATCH 13/30] feat(Calendar): prepare docs

---
 .../calendar/CalendarDisabledDatesExample.vue |   6 +
 .../calendar/CalendarEventsExample.vue        |   6 +
 .../calendar/CalendarMinMaxDatesExample.vue   |   6 +
 .../CalendarUnavailableDatesExample.vue       |   6 +
 docs/content/3.components/calendar.md         | 105 +++++++++++++++++-
 5 files changed, 128 insertions(+), 1 deletion(-)
 create mode 100644 docs/app/components/content/examples/calendar/CalendarDisabledDatesExample.vue
 create mode 100644 docs/app/components/content/examples/calendar/CalendarEventsExample.vue
 create mode 100644 docs/app/components/content/examples/calendar/CalendarMinMaxDatesExample.vue
 create mode 100644 docs/app/components/content/examples/calendar/CalendarUnavailableDatesExample.vue

diff --git a/docs/app/components/content/examples/calendar/CalendarDisabledDatesExample.vue b/docs/app/components/content/examples/calendar/CalendarDisabledDatesExample.vue
new file mode 100644
index 0000000000..3d9989c772
--- /dev/null
+++ b/docs/app/components/content/examples/calendar/CalendarDisabledDatesExample.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>TODO</div>
+</template>
diff --git a/docs/app/components/content/examples/calendar/CalendarEventsExample.vue b/docs/app/components/content/examples/calendar/CalendarEventsExample.vue
new file mode 100644
index 0000000000..3d9989c772
--- /dev/null
+++ b/docs/app/components/content/examples/calendar/CalendarEventsExample.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>TODO</div>
+</template>
diff --git a/docs/app/components/content/examples/calendar/CalendarMinMaxDatesExample.vue b/docs/app/components/content/examples/calendar/CalendarMinMaxDatesExample.vue
new file mode 100644
index 0000000000..3d9989c772
--- /dev/null
+++ b/docs/app/components/content/examples/calendar/CalendarMinMaxDatesExample.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>TODO</div>
+</template>
diff --git a/docs/app/components/content/examples/calendar/CalendarUnavailableDatesExample.vue b/docs/app/components/content/examples/calendar/CalendarUnavailableDatesExample.vue
new file mode 100644
index 0000000000..3d9989c772
--- /dev/null
+++ b/docs/app/components/content/examples/calendar/CalendarUnavailableDatesExample.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>TODO</div>
+</template>
diff --git a/docs/content/3.components/calendar.md b/docs/content/3.components/calendar.md
index 301407d4a1..7a3f066d75 100644
--- a/docs/content/3.components/calendar.md
+++ b/docs/content/3.components/calendar.md
@@ -1,5 +1,5 @@
 ---
-description:
+description: A calendar to select a date.
 links: 
   - label: Calendar
     icon: i-custom-radix-vue
@@ -11,8 +11,111 @@ links:
 
 ## Usage
 
+Use the `v-model` directive to control the selected date.
+
+::component-code
+---
+external:
+  - modelValue
+props:
+  modelValue: new Date('2025-01-01')
+---
+::
+
+### Range
+
+Use the `range` prop to select a range of dates.
+
+::component-code
+---
+ignore:
+  - range
+external:
+  - modelValue
+props:
+  range: true
+  modelValue: { start: new Date('2025-01-01'), end: new Date('2025-01-02') }
+---
+::
+
+### Color
+
+Use the `color` prop to change the color of the calendar.
+
+::component-code
+---
+props:
+  color: neutral
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the calendar.
+
+::component-code
+---
+props:
+  size: md
+---
+::
+
+### Year Controls
+
+Use the `year-controls` prop to show the year controls.
+
+::component-code
+---
+props:
+  yearControls: true
+---
+::
+
+### Fixed Weeks
+
+Use the `fixedWeeks` prop to display the calendar with fixed weeks.
+
+::component-code
+---
+props:
+  fixedWeeks: true
+---
+::
+
 ## Examples
 
+### Events Calendar
+
+::component-example
+---
+name: 'calendar-events-example'
+---
+::
+
+### Disabled Dates
+
+::component-example
+---
+name: 'calendar-disabled-dates-example'
+---
+::
+
+### Unavailable Dates
+
+::component-example
+---
+name: 'calendar-unavailable-dates-example'
+---
+::
+
+### Min/Max Dates
+
+::component-example
+---
+name: 'calendar-min-max-dates-example'
+---
+::
+
 ## API
 
 ### Props

From cd0ba13c155deec4af9ee057e65fdd970a0c83aa Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Fri, 15 Nov 2024 15:36:55 +0500
Subject: [PATCH 14/30] feat(Calendar): range

---
 src/runtime/components/Calendar.vue | 33 ++++++++++++-----------------
 1 file changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 180c85e636..c2442ccd43 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -14,7 +14,7 @@ const calendar = tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })
 
 type CalendarVariants = VariantProps<typeof calendar>
 
-interface BaseCalendarProps extends Pick<CalendarRootProps, 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'numberOfMonths' | 'disabled' | 'readonly' | 'initialFocus' | 'isDateDisabled' | 'isDateUnavailable'> {
+interface BaseCalendarProps<Range extends boolean = false, Value = Range extends true ? DateRange : Date> extends Pick<CalendarRootProps, 'numberOfMonths' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'disabled' | 'readonly' | 'initialFocus' | 'isDateDisabled' | 'isDateUnavailable'> {
   /**
    * The color of the calendar
    */
@@ -26,7 +26,7 @@ interface BaseCalendarProps extends Pick<CalendarRootProps, 'weekStartsOn' | 'we
   /**
    * Is this a range calendar
    */
-  range: boolean
+  range?: Range
   /**
    * Show year controls
    */
@@ -39,24 +39,12 @@ interface BaseCalendarProps extends Pick<CalendarRootProps, 'weekStartsOn' | 'we
    * The minimum date that can be selected
    */
   minValue?: Date
+  modelValue?: Value
+  defaultValue?: Value
   class?: any
   ui?: Partial<typeof calendar.slots>
 }
 
-export interface CalendarSingleProps extends BaseCalendarProps {
-  modelValue?: Date
-  defaultValue?: Date
-  range: false
-}
-
-export interface CalendarRangeProps extends BaseCalendarProps {
-  modelValue?: DateRange
-  defaultValue?: DateRange
-  range: true
-}
-
-export type CalendarProps = CalendarSingleProps | CalendarRangeProps
-
 export interface CalendarEmits {
   (e: 'update:modelValue', value: Date | DateRange): void
 }
@@ -68,15 +56,14 @@ export interface CalendarSlots {
 }
 </script>
 
-<script setup lang="ts" generic="T extends boolean">
+<script setup lang="ts" generic="Range extends boolean = false">
 import { useForwardPropsEmits } from 'radix-vue'
 import { Calendar as SingleCalendar, RangeCalendar } from 'radix-vue/namespaced'
 import { reactivePick } from '@vueuse/core'
 import UButton from './Button.vue'
 import { useLocale } from '../composables/useLocale'
 
-const props = withDefaults(defineProps<CalendarProps>(), {
-  range: false,
+const props = withDefaults(defineProps<BaseCalendarProps<Range>>(), {
   fixedWeeks: true,
   yearControls: true
 })
@@ -85,7 +72,11 @@ defineSlots<CalendarSlots>()
 
 const { code: locale, dir } = useLocale()
 
-const baseRootProps = useForwardPropsEmits(reactivePick(props, 'disabled', 'readonly', 'fixedWeeks', 'initialFocus', 'isDateDisabled', 'isDateUnavailable', 'maxValue', 'minValue', 'numberOfMonths', 'weekdayFormat', 'weekStartsOn'), emits)
+const baseRootProps = useForwardPropsEmits(reactivePick(props, 'disabled', 'readonly', 'fixedWeeks', 'initialFocus', 'isDateDisabled', 'isDateUnavailable', 'weekdayFormat'), emits)
+
+// TODO: transform modelValue, defaultValue to new Date
+// TODO: transform maxValue, minValue to new Date
+// TODO: numberOfMonths, weekStartsOn understand why types break
 
 const ui = computed(() => calendar({
   color: props.color,
@@ -110,6 +101,8 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
     :class="ui.root({ class: [props.class, props.ui?.root] })"
     :locale="locale"
     :dir="dir"
+    :number-of-months="props.numberOfMonths"
+    :week-starts-on="props.weekStartsOn"
   >
     <Calendar.Header :class="ui.header({ class: props.ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" as-child>

From b80efc2758b918e560a3bd8cb324a2b649022ea7 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Fri, 15 Nov 2024 15:40:11 +0500
Subject: [PATCH 15/30] feat(Calendar): minValue, maxValue

---
 src/runtime/components/Calendar.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index c2442ccd43..6c577055f1 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { CalendarRootProps, CalendarCellTriggerProps } from 'radix-vue'
 import type { DateValue } from '@internationalized/date'
+import { fromDate, getLocalTimeZone } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/calendar'
@@ -72,11 +73,13 @@ defineSlots<CalendarSlots>()
 
 const { code: locale, dir } = useLocale()
 
+// TODO: numberOfMonths, weekStartsOn understand why types break
 const baseRootProps = useForwardPropsEmits(reactivePick(props, 'disabled', 'readonly', 'fixedWeeks', 'initialFocus', 'isDateDisabled', 'isDateUnavailable', 'weekdayFormat'), emits)
 
-// TODO: transform modelValue, defaultValue to new Date
-// TODO: transform maxValue, minValue to new Date
-// TODO: numberOfMonths, weekStartsOn understand why types break
+const minValue = computed(() => props.minValue ? fromDate(props.minValue, getLocalTimeZone()) : undefined)
+const maxValue = computed(() => props.maxValue ? fromDate(props.maxValue, getLocalTimeZone()) : undefined)
+
+// TODO: transform modelValue, defaultValue to new Date <-> DateValue
 
 const ui = computed(() => calendar({
   color: props.color,
@@ -103,6 +106,8 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
     :dir="dir"
     :number-of-months="props.numberOfMonths"
     :week-starts-on="props.weekStartsOn"
+    :min-value="minValue"
+    :max-value="maxValue"
   >
     <Calendar.Header :class="ui.header({ class: props.ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" as-child>

From 89b8bdebab80dacef239d6d4a24657608925e9da Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Fri, 15 Nov 2024 16:11:55 +0500
Subject: [PATCH 16/30] feat(Calendar): add issue

---
 docs/app/components/content/ComponentCode.vue | 2 ++
 docs/content/3.components/calendar.md         | 8 +++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/docs/app/components/content/ComponentCode.vue b/docs/app/components/content/ComponentCode.vue
index 562dc1a494..bd6f338f68 100644
--- a/docs/app/components/content/ComponentCode.vue
+++ b/docs/app/components/content/ComponentCode.vue
@@ -93,6 +93,8 @@ const options = computed(() => {
           chip: key.toLowerCase().endsWith('color') ? { color: variant } : undefined
         }))
 
+    // TODO: process "undefined | Date | DateRange", https://github.com/nuxt/ui/issues/2651
+
     return {
       name: key,
       label: key,
diff --git a/docs/content/3.components/calendar.md b/docs/content/3.components/calendar.md
index 7a3f066d75..70ba84cc9b 100644
--- a/docs/content/3.components/calendar.md
+++ b/docs/content/3.components/calendar.md
@@ -15,6 +15,8 @@ Use the `v-model` directive to control the selected date.
 
 ::component-code
 ---
+ignore:
+  - modelValue
 external:
   - modelValue
 props:
@@ -30,11 +32,15 @@ Use the `range` prop to select a range of dates.
 ---
 ignore:
   - range
+  - modelValue.start
+  - modelValue.end
 external:
   - modelValue
 props:
   range: true
-  modelValue: { start: new Date('2025-01-01'), end: new Date('2025-01-02') }
+  modelValue:
+    start: new Date('2025-01-01')
+    end: new Date('2025-01-02')
 ---
 ::
 

From 277640559fc07abbda86203e8b7173c35ff379ad Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Fri, 15 Nov 2024 17:05:31 +0500
Subject: [PATCH 17/30] feat(Calendar): defaultValue

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

diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 6c577055f1..806cae425b 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -15,7 +15,7 @@ const calendar = tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })
 
 type CalendarVariants = VariantProps<typeof calendar>
 
-interface BaseCalendarProps<Range extends boolean = false, Value = Range extends true ? DateRange : Date> extends Pick<CalendarRootProps, 'numberOfMonths' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'disabled' | 'readonly' | 'initialFocus' | 'isDateDisabled' | 'isDateUnavailable'> {
+interface BaseCalendarProps<Range extends boolean, Value = Range extends true ? DateRange : Date> extends Pick<CalendarRootProps, 'numberOfMonths' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'disabled' | 'readonly' | 'initialFocus' | 'isDateDisabled' | 'isDateUnavailable'> {
   /**
    * The color of the calendar
    */
@@ -41,7 +41,7 @@ interface BaseCalendarProps<Range extends boolean = false, Value = Range extends
    */
   minValue?: Date
   modelValue?: Value
-  defaultValue?: Value
+  defaultValue?: Partial<Value>
   class?: any
   ui?: Partial<typeof calendar.slots>
 }
@@ -80,6 +80,18 @@ const minValue = computed(() => props.minValue ? fromDate(props.minValue, getLoc
 const maxValue = computed(() => props.maxValue ? fromDate(props.maxValue, getLocalTimeZone()) : undefined)
 
 // TODO: transform modelValue, defaultValue to new Date <-> DateValue
+const defaultValue = computed(() => {
+  if (props.defaultValue) {
+    return props.range
+      ? {
+          start: props.defaultValue.start ? fromDate(props.defaultValue.start, getLocalTimeZone()) : undefined,
+          end: props.defaultValue.end ? fromDate(props.defaultValue.end, getLocalTimeZone()) : undefined
+        }
+      : fromDate(props.defaultValue, getLocalTimeZone())
+  }
+
+  return undefined
+})
 
 const ui = computed(() => calendar({
   color: props.color,
@@ -108,6 +120,7 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
     :week-starts-on="props.weekStartsOn"
     :min-value="minValue"
     :max-value="maxValue"
+    :default-value="defaultValue"
   >
     <Calendar.Header :class="ui.header({ class: props.ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" as-child>

From 99cdb83e9c7f4bb4888903dca8ff3839ce5c1ac6 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Fri, 15 Nov 2024 19:18:53 +0500
Subject: [PATCH 18/30] feat(Calendar): date

---
 src/runtime/components/Calendar.vue | 20 ++++++++++----------
 src/runtime/types/date.ts           |  7 +++++++
 src/runtime/utils/date.ts           | 21 +++++++++++++++++++++
 3 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 806cae425b..55d8e11e21 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -3,7 +3,6 @@ import { computed } from 'vue'
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { CalendarRootProps, CalendarCellTriggerProps } from 'radix-vue'
 import type { DateValue } from '@internationalized/date'
-import { fromDate, getLocalTimeZone } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/calendar'
@@ -46,8 +45,8 @@ interface BaseCalendarProps<Range extends boolean, Value = Range extends true ?
   ui?: Partial<typeof calendar.slots>
 }
 
-export interface CalendarEmits {
-  (e: 'update:modelValue', value: Date | DateRange): void
+export interface CalendarEmits<Range extends boolean, Value = Range extends true ? DateRange : Date> {
+  (e: 'update:modelValue', value: Value): void
 }
 
 export interface CalendarSlots {
@@ -63,36 +62,37 @@ import { Calendar as SingleCalendar, RangeCalendar } from 'radix-vue/namespaced'
 import { reactivePick } from '@vueuse/core'
 import UButton from './Button.vue'
 import { useLocale } from '../composables/useLocale'
+import { toZonedDateTime } from '../utils/date'
 
 const props = withDefaults(defineProps<BaseCalendarProps<Range>>(), {
   fixedWeeks: true,
   yearControls: true
 })
-const emits = defineEmits<CalendarEmits>()
+const emits = defineEmits<CalendarEmits<Range>>()
 defineSlots<CalendarSlots>()
 
 const { code: locale, dir } = useLocale()
 
-// TODO: numberOfMonths, weekStartsOn understand why types break
 const baseRootProps = useForwardPropsEmits(reactivePick(props, 'disabled', 'readonly', 'fixedWeeks', 'initialFocus', 'isDateDisabled', 'isDateUnavailable', 'weekdayFormat'), emits)
 
-const minValue = computed(() => props.minValue ? fromDate(props.minValue, getLocalTimeZone()) : undefined)
-const maxValue = computed(() => props.maxValue ? fromDate(props.maxValue, getLocalTimeZone()) : undefined)
+const minValue = computed(() => props.minValue ? toZonedDateTime(props.minValue) : undefined)
+const maxValue = computed(() => props.maxValue ? toZonedDateTime(props.maxValue) : undefined)
 
 // TODO: transform modelValue, defaultValue to new Date <-> DateValue
 const defaultValue = computed(() => {
   if (props.defaultValue) {
     return props.range
       ? {
-          start: props.defaultValue.start ? fromDate(props.defaultValue.start, getLocalTimeZone()) : undefined,
-          end: props.defaultValue.end ? fromDate(props.defaultValue.end, getLocalTimeZone()) : undefined
+          start: props.defaultValue.start ? toZonedDateTime(props.defaultValue.start) : undefined,
+          end: props.defaultValue.end ? toZonedDateTime(props.defaultValue.end) : undefined
         }
-      : fromDate(props.defaultValue, getLocalTimeZone())
+      : toZonedDateTime(props.defaultValue)
   }
 
   return undefined
 })
 
+
 const ui = computed(() => calendar({
   color: props.color,
   size: props.size
diff --git a/src/runtime/types/date.ts b/src/runtime/types/date.ts
index 5ea7fb7b78..db94173cea 100644
--- a/src/runtime/types/date.ts
+++ b/src/runtime/types/date.ts
@@ -1,3 +1,5 @@
+import type { ZonedDateTime } from '@internationalized/date'
+
 export interface DateRange {
   /**
    * The start of the range
@@ -8,3 +10,8 @@ export interface DateRange {
    */
   end: Date
 }
+
+export interface ZonedDateRange {
+  start: ZonedDateTime
+  end: ZonedDateTime
+}
diff --git a/src/runtime/utils/date.ts b/src/runtime/utils/date.ts
index e69de29bb2..4c6b09f718 100644
--- a/src/runtime/utils/date.ts
+++ b/src/runtime/utils/date.ts
@@ -0,0 +1,21 @@
+import { fromDate, getLocalTimeZone } from '@internationalized/date'
+import type { ZonedDateTime } from '@internationalized/date'
+import type { DateRange, ZonedDateRange } from '../types/date'
+
+export function toZonedDateTime(date: Date): ZonedDateTime {
+  return fromDate(date, getLocalTimeZone())
+}
+
+export function toRangeZonedDateTime(range: DateRange): ZonedDateRange {
+  return {
+    start: toZonedDateTime(range.start),
+    end: toZonedDateTime(range.end)
+  }
+}
+
+export function toRangeDate(range: ZonedDateRange): DateRange {
+  return {
+    start: range.start.toDate(),
+    end: range.end.toDate()
+  }
+}

From 14ec31eeb6d2d491c480e93b2addaeea8edae7fb Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Fri, 15 Nov 2024 21:40:45 +0500
Subject: [PATCH 19/30] feat(Calendar): model

---
 src/runtime/components/Calendar.vue | 62 ++++++++++++++++++-----------
 src/runtime/utils/date.ts           | 14 ++++---
 2 files changed, 48 insertions(+), 28 deletions(-)

diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 55d8e11e21..f44e45c574 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -6,7 +6,6 @@ import type { DateValue } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/calendar'
-import type { DateRange } from '../types/date'
 
 const appConfig = _appConfig as AppConfig & { ui: { calendar: Partial<typeof theme> } }
 
@@ -14,7 +13,7 @@ const calendar = tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })
 
 type CalendarVariants = VariantProps<typeof calendar>
 
-interface BaseCalendarProps<Range extends boolean, Value = Range extends true ? DateRange : Date> extends Pick<CalendarRootProps, 'numberOfMonths' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'disabled' | 'readonly' | 'initialFocus' | 'isDateDisabled' | 'isDateUnavailable'> {
+interface CalendarProps extends Pick<CalendarRootProps, 'numberOfMonths' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'disabled' | 'readonly' | 'initialFocus' | 'isDateDisabled' | 'isDateUnavailable'> {
   /**
    * The color of the calendar
    */
@@ -26,7 +25,7 @@ interface BaseCalendarProps<Range extends boolean, Value = Range extends true ?
   /**
    * Is this a range calendar
    */
-  range?: Range
+  range?: boolean
   /**
    * Show year controls
    */
@@ -39,14 +38,13 @@ interface BaseCalendarProps<Range extends boolean, Value = Range extends true ?
    * The minimum date that can be selected
    */
   minValue?: Date
-  modelValue?: Value
-  defaultValue?: Partial<Value>
+  defaultValue?: Partial<any>
   class?: any
   ui?: Partial<typeof calendar.slots>
 }
 
-export interface CalendarEmits<Range extends boolean, Value = Range extends true ? DateRange : Date> {
-  (e: 'update:modelValue', value: Value): void
+export interface CalendarEmits {
+  (e: 'update:modelValue', value: any): void
 }
 
 export interface CalendarSlots {
@@ -56,48 +54,65 @@ export interface CalendarSlots {
 }
 </script>
 
-<script setup lang="ts" generic="Range extends boolean = false">
+<script setup lang="ts">
 import { useForwardPropsEmits } from 'radix-vue'
 import { Calendar as SingleCalendar, RangeCalendar } from 'radix-vue/namespaced'
 import { reactivePick } from '@vueuse/core'
 import UButton from './Button.vue'
 import { useLocale } from '../composables/useLocale'
-import { toZonedDateTime } from '../utils/date'
+import { toRangeDate, toRangeZonedDateTime, toZonedDateTime } from '../utils/date'
 
-const props = withDefaults(defineProps<BaseCalendarProps<Range>>(), {
+const props = withDefaults(defineProps<CalendarProps>(), {
   fixedWeeks: true,
   yearControls: true
 })
-const emits = defineEmits<CalendarEmits<Range>>()
+const modelValue = defineModel<any>()
+const emits = defineEmits<CalendarEmits>()
 defineSlots<CalendarSlots>()
 
 const { code: locale, dir } = useLocale()
 
 const baseRootProps = useForwardPropsEmits(reactivePick(props, 'disabled', 'readonly', 'fixedWeeks', 'initialFocus', 'isDateDisabled', 'isDateUnavailable', 'weekdayFormat'), emits)
 
-const minValue = computed(() => props.minValue ? toZonedDateTime(props.minValue) : undefined)
-const maxValue = computed(() => props.maxValue ? toZonedDateTime(props.maxValue) : undefined)
-
-// TODO: transform modelValue, defaultValue to new Date <-> DateValue
-const defaultValue = computed(() => {
+const defaultCalendarValue = computed(() => {
   if (props.defaultValue) {
-    return props.range
-      ? {
-          start: props.defaultValue.start ? toZonedDateTime(props.defaultValue.start) : undefined,
-          end: props.defaultValue.end ? toZonedDateTime(props.defaultValue.end) : undefined
-        }
-      : toZonedDateTime(props.defaultValue)
+    return props.range ? toRangeZonedDateTime(props.defaultValue) : toZonedDateTime(props.defaultValue)
   }
 
   return undefined
 })
 
+const calendarValue = computed({
+  get() {
+    if (modelValue.value) {
+      return props.range ? toRangeZonedDateTime(modelValue.value) : toZonedDateTime(modelValue.value)
+    }
+
+    return defaultCalendarValue.value
+  },
+  set(value) {
+    if (!value) return
+
+    if (props.range) {
+      if (value.start && value.end) {
+        modelValue.value = toRangeDate(value)
+      }
+
+      return
+    }
+
+    modelValue.value = value.toDate()
+  }
+})
 
 const ui = computed(() => calendar({
   color: props.color,
   size: props.size
 }))
 
+const minValue = computed(() => toZonedDateTime(props.minValue))
+const maxValue = computed(() => toZonedDateTime(props.maxValue))
+
 function paginateYear(date: DateValue, sign: -1 | 1) {
   if (sign === -1) {
     return date.subtract({ years: 1 })
@@ -113,6 +128,7 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
   <Calendar.Root
     v-slot="{ weekDays, grid }"
     v-bind="baseRootProps"
+    v-model="calendarValue"
     :class="ui.root({ class: [props.class, props.ui?.root] })"
     :locale="locale"
     :dir="dir"
@@ -120,7 +136,7 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
     :week-starts-on="props.weekStartsOn"
     :min-value="minValue"
     :max-value="maxValue"
-    :default-value="defaultValue"
+    :default-value="defaultCalendarValue"
   >
     <Calendar.Header :class="ui.header({ class: props.ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" as-child>
diff --git a/src/runtime/utils/date.ts b/src/runtime/utils/date.ts
index 4c6b09f718..636ecd6ab2 100644
--- a/src/runtime/utils/date.ts
+++ b/src/runtime/utils/date.ts
@@ -2,14 +2,18 @@ import { fromDate, getLocalTimeZone } from '@internationalized/date'
 import type { ZonedDateTime } from '@internationalized/date'
 import type { DateRange, ZonedDateRange } from '../types/date'
 
-export function toZonedDateTime(date: Date): ZonedDateTime {
-  return fromDate(date, getLocalTimeZone())
+export function toZonedDateTime(date: Date): ZonedDateTime
+export function toZonedDateTime(date?: undefined): undefined
+export function toZonedDateTime(date?: Date | undefined): undefined | ZonedDateTime {
+  return date ? fromDate(date, getLocalTimeZone()) : undefined
 }
 
-export function toRangeZonedDateTime(range: DateRange): ZonedDateRange {
+export function toRangeZonedDateTime(range: Partial<DateRange>): Partial<ZonedDateRange>
+export function toRangeZonedDateTime(range: DateRange): ZonedDateRange
+export function toRangeZonedDateTime(range: DateRange | Partial<DateRange>): ZonedDateRange | Partial<ZonedDateRange> {
   return {
-    start: toZonedDateTime(range.start),
-    end: toZonedDateTime(range.end)
+    start: range.start ? toZonedDateTime(range.start) : undefined,
+    end: range.end ? toZonedDateTime(range.end) : undefined
   }
 }
 

From b3ab240d2ab84553f7445140772d549268127102 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Fri, 15 Nov 2024 23:06:05 +0500
Subject: [PATCH 20/30] feat(Calendar): tests

---
 src/runtime/components/Calendar.vue           |    2 +-
 test/components/Calendar.spec.ts              |   47 +-
 .../__snapshots__/Calendar-vue.spec.ts.snap   | 3687 +++++++++++++++++
 .../__snapshots__/Calendar.spec.ts.snap       | 3687 +++++++++++++++++
 4 files changed, 7419 insertions(+), 4 deletions(-)
 create mode 100644 test/components/__snapshots__/Calendar-vue.spec.ts.snap
 create mode 100644 test/components/__snapshots__/Calendar.spec.ts.snap

diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index f44e45c574..e6ab4cb42a 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -13,7 +13,7 @@ const calendar = tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })
 
 type CalendarVariants = VariantProps<typeof calendar>
 
-interface CalendarProps extends Pick<CalendarRootProps, 'numberOfMonths' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'disabled' | 'readonly' | 'initialFocus' | 'isDateDisabled' | 'isDateUnavailable'> {
+export interface CalendarProps extends Pick<CalendarRootProps, 'numberOfMonths' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'disabled' | 'readonly' | 'initialFocus' | 'isDateDisabled' | 'isDateUnavailable'> {
   /**
    * The color of the calendar
    */
diff --git a/test/components/Calendar.spec.ts b/test/components/Calendar.spec.ts
index d5dd06469f..524c9472c1 100644
--- a/test/components/Calendar.spec.ts
+++ b/test/components/Calendar.spec.ts
@@ -1,17 +1,58 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi, afterAll, test } from 'vitest'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
 import Calendar, { type CalendarProps, type CalendarSlots } from '../../src/runtime/components/Calendar.vue'
 import ComponentRender from '../component-render'
+import theme from '#build/ui/calendar'
 
 describe('Calendar', () => {
+  const sizes = Object.keys(theme.variants.size) as any
+  const date = new Date('2025-01-01')
+
+  vi.setSystemTime(date)
+
+  afterAll(() => {
+    vi.useRealTimers()
+  })
+
   it.each([
     // Props
-    ['with as', { props: { as: 'div' } }],
     ['with class', { props: { class: '' } }],
     ['with ui', { props: { ui: {} } }],
+    ['with range', { props: { range: true } }],
+    ['with disabled', { props: { range: true } }],
+    ['with readonly', { props: { range: true } }],
+    ['with is date disabled', { props: { isDateDisabled: () => true } }],
+    ['with is date unavailable', { props: { isDateUnavailable: () => true } }],
+    ['with week starts on', { props: { weekStartsOn: 1 } }],
+    ['with weekday format', { props: { weekdayFormat: 'short' } }],
+    ['with number of months', { props: { numberOfMonths: 2 } }],
+    ['without fixed weeks', { props: { fixedWeeks: false } }],
+    ['without year controls', { props: { yearControls: false } }],
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
     // Slots
-    ['with default slot', { slots: { default: () => 'Default slot' } }]
+    ['with heading slot', { slots: { heading: () => 'Heading' } }],
+    ['with day slot', { slots: { day: ({ day }: Parameters<CalendarSlots['day']>[0]) => day.day } }],
+    ['with week-day slot', { slots: { 'week-day': ({ day }: Parameters<CalendarSlots['week-day']>[0]) => day } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CalendarProps, slots?: Partial<CalendarSlots> }) => {
     const html = await ComponentRender(nameOrHtml, options, Calendar)
     expect(html).toMatchSnapshot()
   })
+
+  describe('emits', () => {
+    test('update:modelValue event single', async () => {
+      const wrapper = await mountSuspended(Calendar)
+      const date = new Date('2025-01-01')
+
+      await wrapper.setValue(date)
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[date]] })
+    })
+
+    test('update:modelValue event range', async () => {
+      const wrapper = await mountSuspended(Calendar, { props: { range: true } })
+      const date = [new Date('2025-01-01'), new Date('2025-01-02')]
+
+      await wrapper.setValue(date)
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[date]] })
+    })
+  })
 })
diff --git a/test/components/__snapshots__/Calendar-vue.spec.ts.snap b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
new file mode 100644
index 0000000000..c3265f22ec
--- /dev/null
+++ b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
@@ -0,0 +1,3687 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Calendar > renders with class correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with day slot correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with disabled correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-29" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-30" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-31" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-01" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-02" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-03" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-04" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-05" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-06" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-07" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-08" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with heading slot correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">Heading</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with is date disabled correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with is date unavailable correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-unavailable="" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with number of months correctly 1`] = `
+"<div role="application" aria-label="Event Date, January - February 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January - February 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-02-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-02-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-02-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-02-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-02-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-02-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-02-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-01" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-02-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-02-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-02-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-02-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-02-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-02-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-02-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-09" month="2025-02-01" role="button" aria-label="Sunday, February 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-10" month="2025-02-01" role="button" aria-label="Monday, February 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-11" month="2025-02-01" role="button" aria-label="Tuesday, February 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-12" month="2025-02-01" role="button" aria-label="Wednesday, February 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-13" month="2025-02-01" role="button" aria-label="Thursday, February 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-14" month="2025-02-01" role="button" aria-label="Friday, February 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-15" month="2025-02-01" role="button" aria-label="Saturday, February 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-16" month="2025-02-01" role="button" aria-label="Sunday, February 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-17" month="2025-02-01" role="button" aria-label="Monday, February 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-18" month="2025-02-01" role="button" aria-label="Tuesday, February 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-19" month="2025-02-01" role="button" aria-label="Wednesday, February 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-20" month="2025-02-01" role="button" aria-label="Thursday, February 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-21" month="2025-02-01" role="button" aria-label="Friday, February 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-22" month="2025-02-01" role="button" aria-label="Saturday, February 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-23" month="2025-02-01" role="button" aria-label="Sunday, February 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-24" month="2025-02-01" role="button" aria-label="Monday, February 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-25" month="2025-02-01" role="button" aria-label="Tuesday, February 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-26" month="2025-02-01" role="button" aria-label="Wednesday, February 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-27" month="2025-02-01" role="button" aria-label="Thursday, February 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-28" month="2025-02-01" role="button" aria-label="Friday, February 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-01" month="2025-02-01" role="button" aria-label="Saturday, March 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-02" month="2025-02-01" role="button" aria-label="Sunday, March 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-03" month="2025-02-01" role="button" aria-label="Monday, March 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-04" month="2025-02-01" role="button" aria-label="Tuesday, March 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-05" month="2025-02-01" role="button" aria-label="Wednesday, March 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-06" month="2025-02-01" role="button" aria-label="Thursday, March 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-07" month="2025-02-01" role="button" aria-label="Friday, March 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-08" month="2025-02-01" role="button" aria-label="Saturday, March 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January - February 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with range correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-29" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-30" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-31" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-01" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-02" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-03" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-04" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-05" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-06" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-07" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-08" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with readonly correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-29" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-30" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-31" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-01" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-02" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-03" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-04" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-05" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-06" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-07" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-08" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with size lg correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate text-md">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-[var(--ui-primary)] text-md">S</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">M</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">W</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">F</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with size md correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with size sm correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate text-xs">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with size xl correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate text-lg">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">S</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">M</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">W</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">F</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with size xs correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate text-xs">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col sm:flex-row sm:space-x-4 sm:space-y-0 space-y-2 pt-2">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">S</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">M</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">W</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">F</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with ui correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with week starts on correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-09" month="2025-01-01" role="button" aria-label="Sunday, February 9, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-09" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with week-day slot correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with weekday format correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Sun</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Mon</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Tue</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Wed</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Thu</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Fri</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Sat</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders without fixed weeks correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders without year controls correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between">
+    <!--v-if--><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
diff --git a/test/components/__snapshots__/Calendar.spec.ts.snap b/test/components/__snapshots__/Calendar.spec.ts.snap
new file mode 100644
index 0000000000..2a3bb79ef6
--- /dev/null
+++ b/test/components/__snapshots__/Calendar.spec.ts.snap
@@ -0,0 +1,3687 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Calendar > renders with class correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with day slot correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with disabled correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-29" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-30" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-31" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-01" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-02" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-03" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-04" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-05" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-06" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-07" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-08" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with heading slot correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">Heading</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with is date disabled correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-disabled="" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" data-disabled="" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with is date unavailable correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-01" data-unavailable="" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-02" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-03" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-04" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-05" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-06" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-07" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-08" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-09" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-10" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-11" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-12" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-13" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-14" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-15" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-16" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-17" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-18" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-19" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-20" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-21" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-22" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-23" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-24" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-25" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-unavailable="" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="true" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-unavailable="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with number of months correctly 1`] = `
+"<div role="application" aria-label="Event Date, January - February 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January - February 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-02-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-26" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-02-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-27" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-02-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-28" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-02-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-29" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-02-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-30" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-02-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-01-31" data-disabled="" data-outside-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-02-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-01" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-02-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-02-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-02-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-02-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-02-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-02-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-02-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-09" month="2025-02-01" role="button" aria-label="Sunday, February 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-10" month="2025-02-01" role="button" aria-label="Monday, February 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-11" month="2025-02-01" role="button" aria-label="Tuesday, February 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-12" month="2025-02-01" role="button" aria-label="Wednesday, February 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-13" month="2025-02-01" role="button" aria-label="Thursday, February 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-14" month="2025-02-01" role="button" aria-label="Friday, February 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-15" month="2025-02-01" role="button" aria-label="Saturday, February 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-16" month="2025-02-01" role="button" aria-label="Sunday, February 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-17" month="2025-02-01" role="button" aria-label="Monday, February 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-18" month="2025-02-01" role="button" aria-label="Tuesday, February 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-19" month="2025-02-01" role="button" aria-label="Wednesday, February 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-20" month="2025-02-01" role="button" aria-label="Thursday, February 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-21" month="2025-02-01" role="button" aria-label="Friday, February 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-22" month="2025-02-01" role="button" aria-label="Saturday, February 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-23" month="2025-02-01" role="button" aria-label="Sunday, February 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-24" month="2025-02-01" role="button" aria-label="Monday, February 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-25" month="2025-02-01" role="button" aria-label="Tuesday, February 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-26" month="2025-02-01" role="button" aria-label="Wednesday, February 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-27" month="2025-02-01" role="button" aria-label="Thursday, February 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-28" month="2025-02-01" role="button" aria-label="Friday, February 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-02-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-01" month="2025-02-01" role="button" aria-label="Saturday, March 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-02" month="2025-02-01" role="button" aria-label="Sunday, March 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-03" month="2025-02-01" role="button" aria-label="Monday, March 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-04" month="2025-02-01" role="button" aria-label="Tuesday, March 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-05" month="2025-02-01" role="button" aria-label="Wednesday, March 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-06" month="2025-02-01" role="button" aria-label="Thursday, March 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-07" month="2025-02-01" role="button" aria-label="Friday, March 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-03-08" month="2025-02-01" role="button" aria-label="Saturday, March 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-03-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January - February 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with range correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-29" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-30" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-31" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-01" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-02" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-03" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-04" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-05" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-06" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-07" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-08" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with readonly correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-29" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-30" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2024-12-31" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-01" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-02" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-03" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-04" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-05" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-06" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-07" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-outside-visible-view="" data-value="2025-02-08" data-disabled="" data-outside-month="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with size lg correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate text-md">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-[var(--ui-primary)] text-md">S</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">M</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">W</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">F</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-md">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-9 h-9 text-md">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with size md correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with size sm correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate text-xs">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with size xl correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-6" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate text-lg">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">S</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">M</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">W</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">F</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-lg">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-10 h-10 text-lg">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with size xs correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center font-medium truncate text-xs">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col sm:flex-row sm:space-x-4 sm:space-y-0 space-y-2 pt-2">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">S</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">M</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">W</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">T</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">F</th>
+          <th class="rounded-md text-[var(--ui-primary)] text-[10px]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-xs">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-7 h-7">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with ui correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with week starts on correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-09" month="2025-01-01" role="button" aria-label="Sunday, February 9, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-09" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with week-day slot correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders with weekday format correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Sun</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Mon</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Tue</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Wed</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Thu</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Fri</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">Sat</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders without fixed weeks correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;
+
+exports[`Calendar > renders without year controls correctly 1`] = `
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+  <div class="flex items-center justify-between">
+    <!--v-if--><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button>
+    <!--v-if-->
+  </div>
+  <div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
+    <table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1">
+      <thead aria-hidden="true">
+        <tr class="mb-1 grid w-full grid-cols-7">
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">M</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">W</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">T</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">F</th>
+          <th class="rounded-md text-xs text-[var(--ui-primary)]">S</th>
+        </tr>
+      </thead>
+      <tbody class="grid">
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-29" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-30" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2024-12-31" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">9</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">10</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">11</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">12</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">13</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">14</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">15</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">16</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">17</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">18</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">19</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">20</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">21</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">22</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">23</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">24</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">25</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">26</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">27</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">28</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">29</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">30</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-radix-vue-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">31</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-01" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">1</div>
+          </td>
+        </tr>
+        <tr class="grid grid-cols-7">
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-02" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">2</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-03" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">3</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-04" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">4</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-05" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">5</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-06" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">6</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-07" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">7</div>
+          </td>
+          <td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
+            <div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-radix-vue-calendar-cell-trigger="" aria-disabled="true" data-value="2025-02-08" data-disabled="" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-inset data-[disabled]:text-[var(--ui-text)]/30 data-[selected]:!text-[var(--ui-bg)] data-[today]:font-semibold data-[unavailable]:pointer-events-none data-[unavailable]:!text-[var(--ui-text)]/50 data-[unavailable]:line-through transition-[color,opacity] duration-200 focus-visible:ring-[var(--ui-primary)] data-[selected]:!bg-[var(--ui-primary)] data-[today]:text-[var(--ui-primary)] data-[highlighted]:bg-[var(--ui-primary)]/20 hover:bg-[var(--ui-primary)]/20 w-8 h-8">8</div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
+    <div role="heading" aria-level="2">Event Date, January 2025</div>
+  </div>
+</div>"
+`;

From 330bc8d2e2bb8cb15372717e82dab7881c087d9a Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Sun, 17 Nov 2024 14:24:29 +0500
Subject: [PATCH 21/30] feat(Calendar): locale

---
 src/runtime/components/Calendar.vue           |  10 +-
 src/runtime/locale/ar.ts                      |   6 +
 src/runtime/locale/cs.ts                      |   6 +
 src/runtime/locale/de.ts                      |   6 +
 src/runtime/locale/en.ts                      |   6 +
 src/runtime/locale/fr.ts                      |   6 +
 src/runtime/locale/it.ts                      |   6 +
 src/runtime/locale/ru.ts                      |   6 +
 src/runtime/locale/zh_hans.ts                 |   6 +
 src/runtime/locale/zh_hant.ts                 |   6 +
 src/runtime/types/locale.ts                   |   6 +
 .../__snapshots__/Calendar-vue.spec.ts.snap   | 156 +++++++++---------
 .../__snapshots__/Calendar.spec.ts.snap       | 156 +++++++++---------
 13 files changed, 221 insertions(+), 161 deletions(-)

diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index e6ab4cb42a..d5402f96bb 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -70,7 +70,7 @@ const modelValue = defineModel<any>()
 const emits = defineEmits<CalendarEmits>()
 defineSlots<CalendarSlots>()
 
-const { code: locale, dir } = useLocale()
+const { code: locale, dir, t } = useLocale()
 
 const baseRootProps = useForwardPropsEmits(reactivePick(props, 'disabled', 'readonly', 'fixedWeeks', 'initialFocus', 'isDateDisabled', 'isDateUnavailable', 'weekdayFormat'), emits)
 
@@ -139,10 +139,10 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
     :default-value="defaultCalendarValue"
   >
     <Calendar.Header :class="ui.header({ class: props.ui?.header })">
-      <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" as-child>
+      <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
         <UButton :icon="appConfig.ui.icons.chevronDoubleLeft" :size="props.size" color="neutral" variant="ghost" />
       </Calendar.Prev>
-      <Calendar.Prev as-child>
+      <Calendar.Prev :aria-label="t('calendar.prevMonth')" as-child>
         <UButton :icon="appConfig.ui.icons.chevronLeft" :size="props.size" color="neutral" variant="ghost" />
       </Calendar.Prev>
       <Calendar.Heading v-slot="{ headingValue }" :class="ui.heading({ class: props.ui?.heading })">
@@ -150,10 +150,10 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
           {{ headingValue }}
         </slot>
       </Calendar.Heading>
-      <Calendar.Next as-child>
+      <Calendar.Next :aria-label="t('calendar.nextMonth')" as-child>
         <UButton :icon="appConfig.ui.icons.chevronRight" :size="props.size" color="neutral" variant="ghost" />
       </Calendar.Next>
-      <Calendar.Next v-if="props.yearControls" :next-page="(date: DateValue) => paginateYear(date, 1)" as-child>
+      <Calendar.Next v-if="props.yearControls" :next-page="(date: DateValue) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
         <UButton :icon="appConfig.ui.icons.chevronDoubleRight" :size="props.size" color="neutral" variant="ghost" />
       </Calendar.Next>
     </Calendar.Header>
diff --git a/src/runtime/locale/ar.ts b/src/runtime/locale/ar.ts
index ef18d7eea7..2e3a58aaad 100644
--- a/src/runtime/locale/ar.ts
+++ b/src/runtime/locale/ar.ts
@@ -10,6 +10,12 @@ export default defineLocale({
       noData: 'لا توجد بيانات',
       create: 'إنشاء "{label}"'
     },
+    calendar: {
+      prevYear: 'السنة السابقة',
+      nextYear: 'السنة المقبلة',
+      prevMonth: 'الشهر السابق',
+      nextMonth: 'الشهر المقبل'
+    },
     commandPalette: {
       noMatch: 'لا توجد نتائج مطابقة',
       noData: 'لا توجد بيانات',
diff --git a/src/runtime/locale/cs.ts b/src/runtime/locale/cs.ts
index 3a940f08a6..3e63180dfe 100644
--- a/src/runtime/locale/cs.ts
+++ b/src/runtime/locale/cs.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Žádná data',
       create: 'Vytvořit "{label}"'
     },
+    calendar: {
+      prevYear: 'Předchozí rok',
+      nextYear: 'Další rok',
+      prevMonth: 'Předchozí měsíc',
+      nextMonth: 'Další měsíc'
+    },
     commandPalette: {
       noMatch: 'Žádná shoda',
       noData: 'Žádná data',
diff --git a/src/runtime/locale/de.ts b/src/runtime/locale/de.ts
index 39d60d96c1..996af57da1 100644
--- a/src/runtime/locale/de.ts
+++ b/src/runtime/locale/de.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Keine Daten',
       create: 'Erstellen "{label}"'
     },
+    calendar: {
+      prevYear: 'Vorheriges Jahr',
+      nextYear: 'Nächstes Jahr',
+      prevMonth: 'Vorheriger Monat',
+      nextMonth: 'Nächster Monat'
+    },
     commandPalette: {
       noMatch: 'Nichts gefunden',
       noData: 'Keine Daten',
diff --git a/src/runtime/locale/en.ts b/src/runtime/locale/en.ts
index 183cc3b3a9..d0ff955433 100644
--- a/src/runtime/locale/en.ts
+++ b/src/runtime/locale/en.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'No data',
       create: 'Create "{label}"'
     },
+    calendar: {
+      prevYear: 'Previous year',
+      nextYear: 'Next year',
+      prevMonth: 'Previous month',
+      nextMonth: 'Next month'
+    },
     commandPalette: {
       noMatch: 'No matching data',
       noData: 'No data',
diff --git a/src/runtime/locale/fr.ts b/src/runtime/locale/fr.ts
index 48bb9dde56..c9e5bf7233 100644
--- a/src/runtime/locale/fr.ts
+++ b/src/runtime/locale/fr.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Aucune donnée',
       create: 'Créer "{label}"'
     },
+    calendar: {
+      prevYear: 'Année précédente',
+      nextYear: 'Année suivante',
+      prevMonth: 'Mois précédent',
+      nextMonth: 'Mois suivant'
+    },
     commandPalette: {
       noMatch: 'Aucune donnée correspondante',
       noData: 'Aucune donnée',
diff --git a/src/runtime/locale/it.ts b/src/runtime/locale/it.ts
index 1bc8cb49b0..6a71d82078 100644
--- a/src/runtime/locale/it.ts
+++ b/src/runtime/locale/it.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Nessun dato',
       create: 'Crea "{label}"'
     },
+    calendar: {
+      prevYear: 'Anno precedente',
+      nextYear: 'Anno successivo',
+      prevMonth: 'Mese precedente',
+      nextMonth: 'Mese successivo'
+    },
     commandPalette: {
       noMatch: 'Nessun dato corrispondente',
       noData: 'Nessun dato',
diff --git a/src/runtime/locale/ru.ts b/src/runtime/locale/ru.ts
index 80b2e8b22a..1a95f36896 100644
--- a/src/runtime/locale/ru.ts
+++ b/src/runtime/locale/ru.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Нет данных',
       create: 'Создать "{label}"'
     },
+    calendar: {
+      prevYear: 'Предыдущий год',
+      nextYear: 'Следующий год',
+      prevMonth: 'Предыдущий месяц',
+      nextMonth: 'Следующий месяц'
+    },
     commandPalette: {
       noMatch: 'Совпадений не найдено',
       noData: 'Нет данных',
diff --git a/src/runtime/locale/zh_hans.ts b/src/runtime/locale/zh_hans.ts
index edd145c653..ce934633b3 100644
--- a/src/runtime/locale/zh_hans.ts
+++ b/src/runtime/locale/zh_hans.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: '没有数据',
       create: '创建 "{label}"'
     },
+    calendar: {
+      prevYear: '去年',
+      nextYear: '明年',
+      prevMonth: '上个月',
+      nextMonth: '下个月'
+    },
     commandPalette: {
       noMatch: '没有匹配的数据',
       noData: '没有数据',
diff --git a/src/runtime/locale/zh_hant.ts b/src/runtime/locale/zh_hant.ts
index fbd615e846..289ba48bca 100644
--- a/src/runtime/locale/zh_hant.ts
+++ b/src/runtime/locale/zh_hant.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: '沒有資料',
       create: '創建 "{label}"'
     },
+    calendar: {
+      prevYear: '去年',
+      nextYear: '明年',
+      prevMonth: '上个月',
+      nextMonth: '下个月'
+    },
     commandPalette: {
       noMatch: '沒有匹配的資料',
       noData: '沒有資料',
diff --git a/src/runtime/types/locale.ts b/src/runtime/types/locale.ts
index f0f678106c..69373f47ce 100644
--- a/src/runtime/types/locale.ts
+++ b/src/runtime/types/locale.ts
@@ -4,6 +4,12 @@ export type Messages = {
     noData: string
     create: string
   }
+  calendar: {
+    prevYear: string
+    nextYear: string
+    prevMonth: string
+    nextMonth: string
+  }
   commandPalette: {
     noMatch: string
     noData: string
diff --git a/test/components/__snapshots__/Calendar-vue.spec.ts.snap b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
index c3265f22ec..9be019d9bd 100644
--- a/test/components/__snapshots__/Calendar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
@@ -2,17 +2,17 @@
 
 exports[`Calendar > renders with class correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -180,17 +180,17 @@ exports[`Calendar > renders with class correctly 1`] = `
 
 exports[`Calendar > renders with day slot correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -361,17 +361,17 @@ exports[`Calendar > renders with disabled correctly 1`] = `
   <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
     <div role="heading" aria-level="2">Event Date, January 2025</div>
   </div>
-  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -536,17 +536,17 @@ exports[`Calendar > renders with disabled correctly 1`] = `
 
 exports[`Calendar > renders with heading slot correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">Heading</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center text-sm font-medium truncate">Heading</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -714,17 +714,17 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
 
 exports[`Calendar > renders with is date disabled correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -892,17 +892,17 @@ exports[`Calendar > renders with is date disabled correctly 1`] = `
 
 exports[`Calendar > renders with is date unavailable correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1070,17 +1070,17 @@ exports[`Calendar > renders with is date unavailable correctly 1`] = `
 
 exports[`Calendar > renders with number of months correctly 1`] = `
 "<div role="application" aria-label="Event Date, January - February 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January - February 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center text-sm font-medium truncate">January - February 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1404,17 +1404,17 @@ exports[`Calendar > renders with range correctly 1`] = `
   <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
     <div role="heading" aria-level="2">Event Date, January 2025</div>
   </div>
-  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1582,17 +1582,17 @@ exports[`Calendar > renders with readonly correctly 1`] = `
   <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
     <div role="heading" aria-level="2">Event Date, January 2025</div>
   </div>
-  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1757,17 +1757,17 @@ exports[`Calendar > renders with readonly correctly 1`] = `
 
 exports[`Calendar > renders with size lg correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate text-md">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center font-medium truncate text-md">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1935,17 +1935,17 @@ exports[`Calendar > renders with size lg correctly 1`] = `
 
 exports[`Calendar > renders with size md correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2113,17 +2113,17 @@ exports[`Calendar > renders with size md correctly 1`] = `
 
 exports[`Calendar > renders with size sm correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate text-xs">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center font-medium truncate text-xs">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2291,17 +2291,17 @@ exports[`Calendar > renders with size sm correctly 1`] = `
 
 exports[`Calendar > renders with size xl correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate text-lg">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center font-medium truncate text-lg">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-6" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2469,17 +2469,17 @@ exports[`Calendar > renders with size xl correctly 1`] = `
 
 exports[`Calendar > renders with size xs correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate text-xs">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center font-medium truncate text-xs">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-4" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2647,17 +2647,17 @@ exports[`Calendar > renders with size xs correctly 1`] = `
 
 exports[`Calendar > renders with ui correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2825,17 +2825,17 @@ exports[`Calendar > renders with ui correctly 1`] = `
 
 exports[`Calendar > renders with week starts on correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3003,17 +3003,17 @@ exports[`Calendar > renders with week starts on correctly 1`] = `
 
 exports[`Calendar > renders with week-day slot correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3181,17 +3181,17 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
 
 exports[`Calendar > renders with weekday format correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3359,17 +3359,17 @@ exports[`Calendar > renders with weekday format correctly 1`] = `
 
 exports[`Calendar > renders without fixed weeks correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3515,11 +3515,11 @@ exports[`Calendar > renders without fixed weeks correctly 1`] = `
 exports[`Calendar > renders without year controls correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
   <div class="flex items-center justify-between">
-    <!--v-if--><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <!--v-if--><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
     </button>
diff --git a/test/components/__snapshots__/Calendar.spec.ts.snap b/test/components/__snapshots__/Calendar.spec.ts.snap
index 2a3bb79ef6..eb546b763d 100644
--- a/test/components/__snapshots__/Calendar.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar.spec.ts.snap
@@ -2,17 +2,17 @@
 
 exports[`Calendar > renders with class correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -180,17 +180,17 @@ exports[`Calendar > renders with class correctly 1`] = `
 
 exports[`Calendar > renders with day slot correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -361,17 +361,17 @@ exports[`Calendar > renders with disabled correctly 1`] = `
   <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
     <div role="heading" aria-level="2">Event Date, January 2025</div>
   </div>
-  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -536,17 +536,17 @@ exports[`Calendar > renders with disabled correctly 1`] = `
 
 exports[`Calendar > renders with heading slot correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">Heading</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div class="text-center text-sm font-medium truncate">Heading</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -714,17 +714,17 @@ exports[`Calendar > renders with heading slot correctly 1`] = `
 
 exports[`Calendar > renders with is date disabled correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -892,17 +892,17 @@ exports[`Calendar > renders with is date disabled correctly 1`] = `
 
 exports[`Calendar > renders with is date unavailable correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1070,17 +1070,17 @@ exports[`Calendar > renders with is date unavailable correctly 1`] = `
 
 exports[`Calendar > renders with number of months correctly 1`] = `
 "<div role="application" aria-label="Event Date, January - February 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January - February 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div class="text-center text-sm font-medium truncate">January - February 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1404,17 +1404,17 @@ exports[`Calendar > renders with range correctly 1`] = `
   <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
     <div role="heading" aria-level="2">Event Date, January 2025</div>
   </div>
-  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1582,17 +1582,17 @@ exports[`Calendar > renders with readonly correctly 1`] = `
   <div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
     <div role="heading" aria-level="2">Event Date, January 2025</div>
   </div>
-  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" prevpage="(date) => $setup.paginateYear(date, -1)" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" nextpage="(date) => $setup.paginateYear(date, 1)" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1757,17 +1757,17 @@ exports[`Calendar > renders with readonly correctly 1`] = `
 
 exports[`Calendar > renders with size lg correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate text-md">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div class="text-center font-medium truncate text-md">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -1935,17 +1935,17 @@ exports[`Calendar > renders with size lg correctly 1`] = `
 
 exports[`Calendar > renders with size md correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2113,17 +2113,17 @@ exports[`Calendar > renders with size md correctly 1`] = `
 
 exports[`Calendar > renders with size sm correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate text-xs">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+    <div class="text-center font-medium truncate text-xs">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2291,17 +2291,17 @@ exports[`Calendar > renders with size sm correctly 1`] = `
 
 exports[`Calendar > renders with size xl correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-6" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-6" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-6" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate text-lg">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true"></span>
+    <div class="text-center font-medium truncate text-lg">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-6" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-6" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2469,17 +2469,17 @@ exports[`Calendar > renders with size xl correctly 1`] = `
 
 exports[`Calendar > renders with size xs correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-left shrink-0 size-4" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-left shrink-0 size-4" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center font-medium truncate text-xs">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
+    <div class="text-center font-medium truncate text-xs">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevron-right shrink-0 size-4" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1"><span class="iconify i-lucide:chevrons-right shrink-0 size-4" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2647,17 +2647,17 @@ exports[`Calendar > renders with size xs correctly 1`] = `
 
 exports[`Calendar > renders with ui correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -2825,17 +2825,17 @@ exports[`Calendar > renders with ui correctly 1`] = `
 
 exports[`Calendar > renders with week starts on correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3003,17 +3003,17 @@ exports[`Calendar > renders with week starts on correctly 1`] = `
 
 exports[`Calendar > renders with week-day slot correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3181,17 +3181,17 @@ exports[`Calendar > renders with week-day slot correctly 1`] = `
 
 exports[`Calendar > renders with weekday format correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3359,17 +3359,17 @@ exports[`Calendar > renders with weekday format correctly 1`] = `
 
 exports[`Calendar > renders without fixed weeks correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
-  <div class="flex items-center justify-between"><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
+  <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
-    </button><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
+    </button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
@@ -3515,11 +3515,11 @@ exports[`Calendar > renders without fixed weeks correctly 1`] = `
 exports[`Calendar > renders without year controls correctly 1`] = `
 "<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
   <div class="flex items-center justify-between">
-    <!--v-if--><button type="button" aria-label="Previous page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
+    <!--v-if--><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>
-    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next page" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
+    <div class="text-center text-sm font-medium truncate">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
     </button>

From 780641af9ed518ba2d579fe86759400f368dd031 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Mon, 18 Nov 2024 17:08:04 +0500
Subject: [PATCH 22/30] feat(ColorPicker): fix

---
 playground/app/pages/components/calendar.vue |  8 ++-
 src/runtime/components/Calendar.vue          | 73 +++++++++++---------
 src/runtime/types/date.ts                    |  8 +--
 src/runtime/utils/date.ts                    | 10 +--
 test/components/Calendar.spec.ts             |  2 +-
 5 files changed, 54 insertions(+), 47 deletions(-)

diff --git a/playground/app/pages/components/calendar.vue b/playground/app/pages/components/calendar.vue
index b734122186..e575519631 100644
--- a/playground/app/pages/components/calendar.vue
+++ b/playground/app/pages/components/calendar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const singleValue = ref(new Date('2023-09-01'))
-const multipleValue = reactive({
+const multipleValue = ref({
   start: new Date('2023-09-01'),
   end: new Date('2023-09-07')
 })
@@ -11,8 +11,14 @@ const multipleValue = reactive({
     <div class="flex justify-center gap-2">
       <UCalendar v-model="singleValue" />
     </div>
+    <div class="flex justify-center gap-2">
+      <UCalendar v-model="singleValue" :range="false" />
+    </div>
     <div class="flex justify-center gap-2">
       <UCalendar v-model="multipleValue" range />
     </div>
+    <div class="flex justify-center gap-2">
+      <UCalendar v-model="multipleValue" :range="true" />
+    </div>
   </div>
 </template>
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index d5402f96bb..b7bf5f41c4 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -1,11 +1,16 @@
 <script lang="ts">
-import { computed } from 'vue'
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { CalendarRootProps, CalendarCellTriggerProps } from 'radix-vue'
-import type { DateValue } from '@internationalized/date'
+import type { DateValue, ZonedDateTime } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/calendar'
+import type { DateRange } from '../types/date'
+
+export type DateRangeRadix = {
+  start: DateValue | undefined
+  end: DateValue | undefined
+}
 
 const appConfig = _appConfig as AppConfig & { ui: { calendar: Partial<typeof theme> } }
 
@@ -13,7 +18,9 @@ const calendar = tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })
 
 type CalendarVariants = VariantProps<typeof calendar>
 
-export interface CalendarProps extends Pick<CalendarRootProps, 'numberOfMonths' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'disabled' | 'readonly' | 'initialFocus' | 'isDateDisabled' | 'isDateUnavailable'> {
+type ModelValue<T extends boolean> = (T extends true ? DateRange : Date) | undefined
+
+export interface CalendarProps<T extends boolean> extends Pick<CalendarRootProps, 'numberOfMonths' | 'weekStartsOn' | 'weekdayFormat' | 'fixedWeeks' | 'disabled' | 'readonly' | 'initialFocus' | 'isDateDisabled' | 'isDateUnavailable'> {
   /**
    * The color of the calendar
    */
@@ -25,7 +32,7 @@ export interface CalendarProps extends Pick<CalendarRootProps, 'numberOfMonths'
   /**
    * Is this a range calendar
    */
-  range?: boolean
+  range?: T
   /**
    * Show year controls
    */
@@ -38,15 +45,11 @@ export interface CalendarProps extends Pick<CalendarRootProps, 'numberOfMonths'
    * The minimum date that can be selected
    */
   minValue?: Date
-  defaultValue?: Partial<any>
+  defaultValue?: ModelValue<T>
   class?: any
   ui?: Partial<typeof calendar.slots>
 }
 
-export interface CalendarEmits {
-  (e: 'update:modelValue', value: any): void
-}
-
 export interface CalendarSlots {
   'heading': (props: { value: string }) => any
   'day': (props: Pick<CalendarCellTriggerProps, 'day'>) => any
@@ -54,54 +57,56 @@ export interface CalendarSlots {
 }
 </script>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends boolean">
+import { toRef, computed } from 'vue'
 import { useForwardPropsEmits } from 'radix-vue'
 import { Calendar as SingleCalendar, RangeCalendar } from 'radix-vue/namespaced'
 import { reactivePick } from '@vueuse/core'
 import UButton from './Button.vue'
 import { useLocale } from '../composables/useLocale'
 import { toRangeDate, toRangeZonedDateTime, toZonedDateTime } from '../utils/date'
+import type { ZonedDateRange } from '#ui/types/date'
 
-const props = withDefaults(defineProps<CalendarProps>(), {
+const props = withDefaults(defineProps<CalendarProps<T>>(), {
   fixedWeeks: true,
   yearControls: true
 })
-const modelValue = defineModel<any>()
-const emits = defineEmits<CalendarEmits>()
+
+// This is a hack due to generic boolean casting (see https://github.com/nuxt/ui/issues/2541)
+const range = toRef(() => typeof props.range === 'string' ? true : props.range)
+
+const modelValue = defineModel<ModelValue<T>>(undefined)
 defineSlots<CalendarSlots>()
 
 const { code: locale, dir, t } = useLocale()
 
 const baseRootProps = useForwardPropsEmits(reactivePick(props, 'disabled', 'readonly', 'fixedWeeks', 'initialFocus', 'isDateDisabled', 'isDateUnavailable', 'weekdayFormat'), emits)
 
-const defaultCalendarValue = computed(() => {
-  if (props.defaultValue) {
-    return props.range ? toRangeZonedDateTime(props.defaultValue) : toZonedDateTime(props.defaultValue)
+function isRange(value: ModelValue<boolean>): value is ModelValue<true> {
+  return !!range.value
+}
+
+function transformModel(value: ModelValue<boolean>) {
+  if (!value) {
+    return undefined
   }
 
-  return undefined
-})
+  return isRange(value) ? toRangeZonedDateTime(value) : toZonedDateTime(value)
+}
+
+const defaultCalendarValue = computed(() => transformModel(props.defaultValue))
 
 const calendarValue = computed({
   get() {
-    if (modelValue.value) {
-      return props.range ? toRangeZonedDateTime(modelValue.value) : toZonedDateTime(modelValue.value)
-    }
-
-    return defaultCalendarValue.value
+    return transformModel(modelValue.value) ?? defaultCalendarValue.value
   },
   set(value) {
-    if (!value) return
-
-    if (props.range) {
-      if (value.start && value.end) {
-        modelValue.value = toRangeDate(value)
-      }
-
+    if (!value) {
+      modelValue.value = value
       return
     }
 
-    modelValue.value = value.toDate()
+    modelValue.value = (range.value ? toRangeDate(value as ZonedDateRange) : (value as ZonedDateTime).toDate()) as ModelValue<T>
   }
 })
 
@@ -121,14 +126,14 @@ function paginateYear(date: DateValue, sign: -1 | 1) {
   return date.add({ years: 1 })
 }
 
-const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
+const Calendar = computed(() => range.value ? RangeCalendar : SingleCalendar)
 </script>
 
 <template>
   <Calendar.Root
     v-slot="{ weekDays, grid }"
     v-bind="baseRootProps"
-    v-model="calendarValue"
+    v-model="calendarValue as (DateRangeRadix & DateValue)"
     :class="ui.root({ class: [props.class, props.ui?.root] })"
     :locale="locale"
     :dir="dir"
@@ -136,7 +141,7 @@ const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar)
     :week-starts-on="props.weekStartsOn"
     :min-value="minValue"
     :max-value="maxValue"
-    :default-value="defaultCalendarValue"
+    :default-value="defaultCalendarValue as (DateRangeRadix & DateValue)"
   >
     <Calendar.Header :class="ui.header({ class: props.ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
diff --git a/src/runtime/types/date.ts b/src/runtime/types/date.ts
index db94173cea..d88e7bc6a2 100644
--- a/src/runtime/types/date.ts
+++ b/src/runtime/types/date.ts
@@ -4,14 +4,14 @@ export interface DateRange {
   /**
    * The start of the range
    */
-  start: Date
+  start: Date | undefined
   /**
    * The end of the range
    */
-  end: Date
+  end: Date | undefined
 }
 
 export interface ZonedDateRange {
-  start: ZonedDateTime
-  end: ZonedDateTime
+  start: ZonedDateTime | undefined
+  end: ZonedDateTime | undefined
 }
diff --git a/src/runtime/utils/date.ts b/src/runtime/utils/date.ts
index 636ecd6ab2..f013d3813f 100644
--- a/src/runtime/utils/date.ts
+++ b/src/runtime/utils/date.ts
@@ -2,15 +2,11 @@ import { fromDate, getLocalTimeZone } from '@internationalized/date'
 import type { ZonedDateTime } from '@internationalized/date'
 import type { DateRange, ZonedDateRange } from '../types/date'
 
-export function toZonedDateTime(date: Date): ZonedDateTime
-export function toZonedDateTime(date?: undefined): undefined
 export function toZonedDateTime(date?: Date | undefined): undefined | ZonedDateTime {
   return date ? fromDate(date, getLocalTimeZone()) : undefined
 }
 
-export function toRangeZonedDateTime(range: Partial<DateRange>): Partial<ZonedDateRange>
-export function toRangeZonedDateTime(range: DateRange): ZonedDateRange
-export function toRangeZonedDateTime(range: DateRange | Partial<DateRange>): ZonedDateRange | Partial<ZonedDateRange> {
+export function toRangeZonedDateTime(range: DateRange): ZonedDateRange {
   return {
     start: range.start ? toZonedDateTime(range.start) : undefined,
     end: range.end ? toZonedDateTime(range.end) : undefined
@@ -19,7 +15,7 @@ export function toRangeZonedDateTime(range: DateRange | Partial<DateRange>): Zon
 
 export function toRangeDate(range: ZonedDateRange): DateRange {
   return {
-    start: range.start.toDate(),
-    end: range.end.toDate()
+    start: range.start?.toDate(),
+    end: range.end?.toDate()
   }
 }
diff --git a/test/components/Calendar.spec.ts b/test/components/Calendar.spec.ts
index 524c9472c1..8d46d42bf4 100644
--- a/test/components/Calendar.spec.ts
+++ b/test/components/Calendar.spec.ts
@@ -33,7 +33,7 @@ describe('Calendar', () => {
     ['with heading slot', { slots: { heading: () => 'Heading' } }],
     ['with day slot', { slots: { day: ({ day }: Parameters<CalendarSlots['day']>[0]) => day.day } }],
     ['with week-day slot', { slots: { 'week-day': ({ day }: Parameters<CalendarSlots['week-day']>[0]) => day } }]
-  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CalendarProps, slots?: Partial<CalendarSlots> }) => {
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: CalendarProps<false>, slots?: Partial<CalendarSlots> }) => {
     const html = await ComponentRender(nameOrHtml, options, Calendar)
     expect(html).toMatchSnapshot()
   })

From 84ef6e27583b86bf45d733c124c24d96d784b32f Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Mon, 18 Nov 2024 18:09:40 +0500
Subject: [PATCH 23/30] feat(ColorPicker): fix 2

---
 src/runtime/components/Calendar.vue | 67 +++++++++++++++++------------
 src/runtime/types/date.ts           |  7 ++-
 2 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index b7bf5f41c4..a9de610838 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -5,12 +5,8 @@ import type { DateValue, ZonedDateTime } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/calendar'
-import type { DateRange } from '../types/date'
-
-export type DateRangeRadix = {
-  start: DateValue | undefined
-  end: DateValue | undefined
-}
+import type { DateRange, DateRangeRadix } from '../types/date'
+import type { Grid } from 'radix-vue/date'
 
 const appConfig = _appConfig as AppConfig & { ui: { calendar: Partial<typeof theme> } }
 
@@ -45,7 +41,6 @@ export interface CalendarProps<T extends boolean> extends Pick<CalendarRootProps
    * The minimum date that can be selected
    */
   minValue?: Date
-  defaultValue?: ModelValue<T>
   class?: any
   ui?: Partial<typeof calendar.slots>
 }
@@ -59,9 +54,8 @@ export interface CalendarSlots {
 
 <script setup lang="ts" generic="T extends boolean">
 import { toRef, computed } from 'vue'
-import { useForwardPropsEmits } from 'radix-vue'
 import { Calendar as SingleCalendar, RangeCalendar } from 'radix-vue/namespaced'
-import { reactivePick } from '@vueuse/core'
+import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import UButton from './Button.vue'
 import { useLocale } from '../composables/useLocale'
 import { toRangeDate, toRangeZonedDateTime, toZonedDateTime } from '../utils/date'
@@ -80,9 +74,11 @@ defineSlots<CalendarSlots>()
 
 const { code: locale, dir, t } = useLocale()
 
-const baseRootProps = useForwardPropsEmits(reactivePick(props, 'disabled', 'readonly', 'fixedWeeks', 'initialFocus', 'isDateDisabled', 'isDateUnavailable', 'weekdayFormat'), emits)
+const baseRootProps = reactivePick(props, 'disabled', 'readonly', 'fixedWeeks', 'initialFocus', 'isDateDisabled', 'isDateUnavailable', 'weekdayFormat')
 
-function isRange(value: ModelValue<boolean>): value is ModelValue<true> {
+function isRange(value: DateRangeRadix | DateValue | undefined): value is DateRangeRadix
+function isRange(value: ModelValue<boolean>): value is ModelValue<true>
+function isRange(value: ModelValue<boolean> | DateRangeRadix | DateValue | undefined) {
   return !!range.value
 }
 
@@ -94,11 +90,9 @@ function transformModel(value: ModelValue<boolean>) {
   return isRange(value) ? toRangeZonedDateTime(value) : toZonedDateTime(value)
 }
 
-const defaultCalendarValue = computed(() => transformModel(props.defaultValue))
-
 const calendarValue = computed({
   get() {
-    return transformModel(modelValue.value) ?? defaultCalendarValue.value
+    return transformModel(modelValue.value)
   },
   set(value) {
     if (!value) {
@@ -127,22 +121,22 @@ function paginateYear(date: DateValue, sign: -1 | 1) {
 }
 
 const Calendar = computed(() => range.value ? RangeCalendar : SingleCalendar)
+const [DefineCalendarBody, CalendarBody] = createReusableTemplate<{ grid: Grid<DateValue>[], weekDays: string[] }>()
+
+const calendarProps = computed(() => {
+  return {
+    ...baseRootProps,
+    minValue: minValue.value,
+    maxValue: maxValue.value,
+    locale: locale.value,
+    dir: dir.value,
+    class: ui.value.root({ class: [props.class, props.ui?.root] })
+  }
+})
 </script>
 
 <template>
-  <Calendar.Root
-    v-slot="{ weekDays, grid }"
-    v-bind="baseRootProps"
-    v-model="calendarValue as (DateRangeRadix & DateValue)"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
-    :locale="locale"
-    :dir="dir"
-    :number-of-months="props.numberOfMonths"
-    :week-starts-on="props.weekStartsOn"
-    :min-value="minValue"
-    :max-value="maxValue"
-    :default-value="defaultCalendarValue as (DateRangeRadix & DateValue)"
-  >
+  <DefineCalendarBody v-slot="{ weekDays, grid }">
     <Calendar.Header :class="ui.header({ class: props.ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
         <UButton :icon="appConfig.ui.icons.chevronDoubleLeft" :size="props.size" color="neutral" variant="ghost" />
@@ -207,5 +201,22 @@ const Calendar = computed(() => range.value ? RangeCalendar : SingleCalendar)
         </Calendar.GridBody>
       </Calendar.Grid>
     </div>
-  </Calendar.Root>
+  </DefineCalendarBody>
+
+  <RangeCalendar.Root
+    v-if="isRange(calendarValue)"
+    v-slot="{ weekDays, grid }"
+    v-model="calendarValue"
+    v-bind="calendarProps"
+  >
+    <CalendarBody v-bind="{ weekDays, grid }" />
+  </RangeCalendar.Root>
+  <SingleCalendar.Root
+    v-else
+    v-slot="{ weekDays, grid }"
+    v-model="calendarValue"
+    v-bind="calendarProps"
+  >
+    <CalendarBody v-bind="{ weekDays, grid }" />
+  </SingleCalendar.Root>
 </template>
diff --git a/src/runtime/types/date.ts b/src/runtime/types/date.ts
index d88e7bc6a2..dfc7fe05ae 100644
--- a/src/runtime/types/date.ts
+++ b/src/runtime/types/date.ts
@@ -1,4 +1,4 @@
-import type { ZonedDateTime } from '@internationalized/date'
+import type {DateValue, ZonedDateTime} from '@internationalized/date'
 
 export interface DateRange {
   /**
@@ -15,3 +15,8 @@ export interface ZonedDateRange {
   start: ZonedDateTime | undefined
   end: ZonedDateTime | undefined
 }
+
+export type DateRangeRadix = {
+  start: DateValue | undefined
+  end: DateValue | undefined
+}

From 22913ddc9395eecbafe41645c186f954a50192e3 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Mon, 18 Nov 2024 18:54:29 +0500
Subject: [PATCH 24/30] feat(ColorPicker): fix 3

---
 playground/app/pages/components/calendar.vue |  4 ++
 src/runtime/components/Calendar.vue          | 39 ++++++++------------
 src/runtime/types/date.ts                    |  2 +-
 3 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/playground/app/pages/components/calendar.vue b/playground/app/pages/components/calendar.vue
index e575519631..edc7008548 100644
--- a/playground/app/pages/components/calendar.vue
+++ b/playground/app/pages/components/calendar.vue
@@ -7,6 +7,10 @@ const multipleValue = ref({
 </script>
 
 <template>
+  <UButton @click="() => singleValue = new Date()">
+    new Date
+  </UButton>
+
   <div class="flex flex-col gap-4">
     <div class="flex justify-center gap-2">
       <UCalendar v-model="singleValue" />
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index a9de610838..1427a4e6b3 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -1,11 +1,11 @@
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
 import type { CalendarRootProps, CalendarCellTriggerProps } from 'radix-vue'
-import type { DateValue, ZonedDateTime } from '@internationalized/date'
+import type { DateValue } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/calendar'
-import type { DateRange, DateRangeRadix } from '../types/date'
+import type { DateRange, DateRangeRadix, ZonedDateRange } from '../types/date'
 import type { Grid } from 'radix-vue/date'
 
 const appConfig = _appConfig as AppConfig & { ui: { calendar: Partial<typeof theme> } }
@@ -55,11 +55,10 @@ export interface CalendarSlots {
 <script setup lang="ts" generic="T extends boolean">
 import { toRef, computed } from 'vue'
 import { Calendar as SingleCalendar, RangeCalendar } from 'radix-vue/namespaced'
-import { reactivePick, createReusableTemplate } from '@vueuse/core'
+import { createReusableTemplate, objectOmit } from '@vueuse/core'
 import UButton from './Button.vue'
 import { useLocale } from '../composables/useLocale'
 import { toRangeDate, toRangeZonedDateTime, toZonedDateTime } from '../utils/date'
-import type { ZonedDateRange } from '#ui/types/date'
 
 const props = withDefaults(defineProps<CalendarProps<T>>(), {
   fixedWeeks: true,
@@ -68,31 +67,26 @@ const props = withDefaults(defineProps<CalendarProps<T>>(), {
 
 // This is a hack due to generic boolean casting (see https://github.com/nuxt/ui/issues/2541)
 const range = toRef(() => typeof props.range === 'string' ? true : props.range)
-
 const modelValue = defineModel<ModelValue<T>>(undefined)
 defineSlots<CalendarSlots>()
 
 const { code: locale, dir, t } = useLocale()
 
-const baseRootProps = reactivePick(props, 'disabled', 'readonly', 'fixedWeeks', 'initialFocus', 'isDateDisabled', 'isDateUnavailable', 'weekdayFormat')
-
 function isRange(value: DateRangeRadix | DateValue | undefined): value is DateRangeRadix
 function isRange(value: ModelValue<boolean>): value is ModelValue<true>
 function isRange(value: ModelValue<boolean> | DateRangeRadix | DateValue | undefined) {
   return !!range.value
 }
 
-function transformModel(value: ModelValue<boolean>) {
-  if (!value) {
-    return undefined
-  }
-
-  return isRange(value) ? toRangeZonedDateTime(value) : toZonedDateTime(value)
-}
-
 const calendarValue = computed({
   get() {
-    return transformModel(modelValue.value)
+    const value = modelValue.value
+
+    if (!value) {
+      return undefined
+    }
+
+    return isRange(value) ? toRangeZonedDateTime(value) : toZonedDateTime(value)
   },
   set(value) {
     if (!value) {
@@ -100,7 +94,7 @@ const calendarValue = computed({
       return
     }
 
-    modelValue.value = (range.value ? toRangeDate(value as ZonedDateRange) : (value as ZonedDateTime).toDate()) as ModelValue<T>
+    modelValue.value = (isRange(value) ? toRangeDate(value) : value.toDate()) as ModelValue<T>
   }
 })
 
@@ -109,9 +103,6 @@ const ui = computed(() => calendar({
   size: props.size
 }))
 
-const minValue = computed(() => toZonedDateTime(props.minValue))
-const maxValue = computed(() => toZonedDateTime(props.maxValue))
-
 function paginateYear(date: DateValue, sign: -1 | 1) {
   if (sign === -1) {
     return date.subtract({ years: 1 })
@@ -125,11 +116,11 @@ const [DefineCalendarBody, CalendarBody] = createReusableTemplate<{ grid: Grid<D
 
 const calendarProps = computed(() => {
   return {
-    ...baseRootProps,
-    minValue: minValue.value,
-    maxValue: maxValue.value,
+    ...objectOmit(props, ['color', 'size', 'range', 'yearControls', 'modelValue' as any]),
     locale: locale.value,
     dir: dir.value,
+    minValue: toZonedDateTime(props.minValue),
+    maxValue: toZonedDateTime(props.maxValue),
     class: ui.value.root({ class: [props.class, props.ui?.root] })
   }
 })
@@ -206,7 +197,7 @@ const calendarProps = computed(() => {
   <RangeCalendar.Root
     v-if="isRange(calendarValue)"
     v-slot="{ weekDays, grid }"
-    v-model="calendarValue"
+    v-model="calendarValue as DateRangeRadix & DateValue"
     v-bind="calendarProps"
   >
     <CalendarBody v-bind="{ weekDays, grid }" />
diff --git a/src/runtime/types/date.ts b/src/runtime/types/date.ts
index dfc7fe05ae..f9e495296c 100644
--- a/src/runtime/types/date.ts
+++ b/src/runtime/types/date.ts
@@ -1,4 +1,4 @@
-import type {DateValue, ZonedDateTime} from '@internationalized/date'
+import type { DateValue, ZonedDateTime } from '@internationalized/date'
 
 export interface DateRange {
   /**

From 5fa1cbe3fc74a0ae154bd112ebd6298a0b46f844 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Mon, 18 Nov 2024 18:56:51 +0500
Subject: [PATCH 25/30] feat(ColorPicker): fix 4

---
 src/runtime/components/Calendar.vue | 28 +++++++---------------------
 1 file changed, 7 insertions(+), 21 deletions(-)

diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 1427a4e6b3..125ec58b6a 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -55,7 +55,7 @@ export interface CalendarSlots {
 <script setup lang="ts" generic="T extends boolean">
 import { toRef, computed } from 'vue'
 import { Calendar as SingleCalendar, RangeCalendar } from 'radix-vue/namespaced'
-import { createReusableTemplate, objectOmit } from '@vueuse/core'
+import { objectOmit } from '@vueuse/core'
 import UButton from './Button.vue'
 import { useLocale } from '../composables/useLocale'
 import { toRangeDate, toRangeZonedDateTime, toZonedDateTime } from '../utils/date'
@@ -112,7 +112,6 @@ function paginateYear(date: DateValue, sign: -1 | 1) {
 }
 
 const Calendar = computed(() => range.value ? RangeCalendar : SingleCalendar)
-const [DefineCalendarBody, CalendarBody] = createReusableTemplate<{ grid: Grid<DateValue>[], weekDays: string[] }>()
 
 const calendarProps = computed(() => {
   return {
@@ -127,7 +126,11 @@ const calendarProps = computed(() => {
 </script>
 
 <template>
-  <DefineCalendarBody v-slot="{ weekDays, grid }">
+  <Calendar.Root
+    v-slot="{ weekDays, grid }"
+    v-model="calendarValue as DateRangeRadix & DateValue"
+    v-bind="calendarProps"
+  >
     <Calendar.Header :class="ui.header({ class: props.ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
         <UButton :icon="appConfig.ui.icons.chevronDoubleLeft" :size="props.size" color="neutral" variant="ghost" />
@@ -192,22 +195,5 @@ const calendarProps = computed(() => {
         </Calendar.GridBody>
       </Calendar.Grid>
     </div>
-  </DefineCalendarBody>
-
-  <RangeCalendar.Root
-    v-if="isRange(calendarValue)"
-    v-slot="{ weekDays, grid }"
-    v-model="calendarValue as DateRangeRadix & DateValue"
-    v-bind="calendarProps"
-  >
-    <CalendarBody v-bind="{ weekDays, grid }" />
-  </RangeCalendar.Root>
-  <SingleCalendar.Root
-    v-else
-    v-slot="{ weekDays, grid }"
-    v-model="calendarValue"
-    v-bind="calendarProps"
-  >
-    <CalendarBody v-bind="{ weekDays, grid }" />
-  </SingleCalendar.Root>
+  </Calendar.Root>
 </template>

From c0f4680a601676d1f081531074e7ca0609af0289 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Mon, 18 Nov 2024 19:02:23 +0500
Subject: [PATCH 26/30] feat(ColorPicker): fix 5

---
 playground/app/pages/components/calendar.vue | 4 ----
 src/runtime/components/Calendar.vue          | 9 ++++-----
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/playground/app/pages/components/calendar.vue b/playground/app/pages/components/calendar.vue
index edc7008548..e575519631 100644
--- a/playground/app/pages/components/calendar.vue
+++ b/playground/app/pages/components/calendar.vue
@@ -7,10 +7,6 @@ const multipleValue = ref({
 </script>
 
 <template>
-  <UButton @click="() => singleValue = new Date()">
-    new Date
-  </UButton>
-
   <div class="flex flex-col gap-4">
     <div class="flex justify-center gap-2">
       <UCalendar v-model="singleValue" />
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 125ec58b6a..7bf02e84df 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -5,8 +5,7 @@ import type { DateValue } from '@internationalized/date'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/ui/calendar'
-import type { DateRange, DateRangeRadix, ZonedDateRange } from '../types/date'
-import type { Grid } from 'radix-vue/date'
+import type { DateRange, DateRangeRadix } from '../types/date'
 
 const appConfig = _appConfig as AppConfig & { ui: { calendar: Partial<typeof theme> } }
 
@@ -115,12 +114,11 @@ const Calendar = computed(() => range.value ? RangeCalendar : SingleCalendar)
 
 const calendarProps = computed(() => {
   return {
-    ...objectOmit(props, ['color', 'size', 'range', 'yearControls', 'modelValue' as any]),
+    ...objectOmit(props, ['color', 'size', 'range', 'yearControls', 'class', 'ui', 'modelValue' as any]),
     locale: locale.value,
     dir: dir.value,
     minValue: toZonedDateTime(props.minValue),
-    maxValue: toZonedDateTime(props.maxValue),
-    class: ui.value.root({ class: [props.class, props.ui?.root] })
+    maxValue: toZonedDateTime(props.maxValue)
   }
 })
 </script>
@@ -130,6 +128,7 @@ const calendarProps = computed(() => {
     v-slot="{ weekDays, grid }"
     v-model="calendarValue as DateRangeRadix & DateValue"
     v-bind="calendarProps"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
   >
     <Calendar.Header :class="ui.header({ class: props.ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date: DateValue) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>

From 42c9e7a3058cf1a42aebdae3727d38cb9f35d059 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Mon, 18 Nov 2024 19:14:06 +0500
Subject: [PATCH 27/30] feat(ColorPicker): fix 6

---
 package.json   | 1 +
 pnpm-lock.yaml | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/package.json b/package.json
index b5f8b7a487..84a47d398d 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
   },
   "dependencies": {
     "@iconify/vue": "^4.1.2",
+    "@internationalized/date": "^3.5.6",
     "@internationalized/number": "^3.5.4",
     "@nuxt/devtools-kit": "^1.6.0",
     "@nuxt/fonts": "^0.10.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5597376adc..6e1526828f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ importers:
       '@iconify/vue':
         specifier: ^4.1.2
         version: 4.1.2(vue@3.5.12(typescript@5.6.3))
+      '@internationalized/date':
+        specifier: ^3.5.6
+        version: 3.5.6
       '@internationalized/number':
         specifier: ^3.5.4
         version: 3.5.4

From 2af16b51acd89dc66d76213197ec016c635e2cb7 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Mon, 18 Nov 2024 19:16:37 +0500
Subject: [PATCH 28/30] feat(ColorPicker): fix 7

---
 src/runtime/types/locale.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/types/locale.ts b/src/runtime/types/locale.ts
index 31881a90cb..4148874b97 100644
--- a/src/runtime/types/locale.ts
+++ b/src/runtime/types/locale.ts
@@ -9,7 +9,7 @@ export type Messages = {
     nextYear: string
     prevMonth: string
     nextMonth: string
-  },
+  }
   inputNumber: {
     increment: string
     decrement: string

From af5ef664da5d1555f842f2e135c0f3a4507d9d77 Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Mon, 18 Nov 2024 19:18:16 +0500
Subject: [PATCH 29/30] feat(ColorPicker): fix 8

---
 src/runtime/locale/es.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/runtime/locale/es.ts b/src/runtime/locale/es.ts
index f3579f4e8d..bd24c608ac 100644
--- a/src/runtime/locale/es.ts
+++ b/src/runtime/locale/es.ts
@@ -9,6 +9,12 @@ export default defineLocale({
       noData: 'Sin datos',
       create: 'Crear "{label}"'
     },
+    calendar: {
+      prevYear: 'A o anterior',
+      nextYear: 'A o siguiente',
+      prevMonth: 'Mes anterior',
+      nextMonth: 'Mes siguiente'
+    },
     inputNumber: {
       increment: 'Incremento',
       decrement: 'Decremento'

From 71541ec5e3ae4eb0856a74af81d5662f97181ecf Mon Sep 17 00:00:00 2001
From: hywax <me@hywax.space>
Date: Mon, 18 Nov 2024 20:13:59 +0500
Subject: [PATCH 30/30] feat(ColorPicker): docs

---
 .../calendar/CalendarDisabledDatesExample.vue | 12 +++++++++-
 .../calendar/CalendarEventsExample.vue        | 24 ++++++++++++++++++-
 .../calendar/CalendarMinMaxDatesExample.vue   |  8 ++++++-
 .../CalendarUnavailableDatesExample.vue       | 12 +++++++++-
 docs/content/3.components/calendar.md         | 23 ++++++++----------
 playground/app/pages/components/calendar.vue  |  6 -----
 src/runtime/components/Calendar.vue           |  2 ++
 test/components/Calendar.spec.ts              |  4 ++--
 .../__snapshots__/Calendar-vue.spec.ts.snap   |  4 ++--
 .../__snapshots__/Calendar.spec.ts.snap       |  4 ++--
 10 files changed, 70 insertions(+), 29 deletions(-)

diff --git a/docs/app/components/content/examples/calendar/CalendarDisabledDatesExample.vue b/docs/app/components/content/examples/calendar/CalendarDisabledDatesExample.vue
index 3d9989c772..78e4774c77 100644
--- a/docs/app/components/content/examples/calendar/CalendarDisabledDatesExample.vue
+++ b/docs/app/components/content/examples/calendar/CalendarDisabledDatesExample.vue
@@ -1,6 +1,16 @@
 <script setup lang="ts">
+import type { Matcher } from '#ui/components/Calendar.vue'
+
+const modelValue = ref({
+  start: new Date('2023-09-08'),
+  end: new Date('2023-09-09')
+})
+
+const isDateDisabled: Matcher = (date) => {
+  return date.day >= 10 && date.day <= 16
+}
 </script>
 
 <template>
-  <div>TODO</div>
+  <UCalendar v-model="modelValue" :is-date-disabled="isDateDisabled" range />
 </template>
diff --git a/docs/app/components/content/examples/calendar/CalendarEventsExample.vue b/docs/app/components/content/examples/calendar/CalendarEventsExample.vue
index 3d9989c772..23ee1a6a51 100644
--- a/docs/app/components/content/examples/calendar/CalendarEventsExample.vue
+++ b/docs/app/components/content/examples/calendar/CalendarEventsExample.vue
@@ -1,6 +1,28 @@
 <script setup lang="ts">
+const modelValue = ref(new Date('2023-09-08'))
+
+function getColorByDate(date: Date) {
+  const isWeekend = date.getDay() % 6 == 0
+  const isDayMeeting = date.getDay() % 3 == 0
+
+  if (isWeekend) {
+    return undefined
+  }
+
+  if (isDayMeeting) {
+    return 'warning'
+  }
+
+  return 'info'
+}
 </script>
 
 <template>
-  <div>TODO</div>
+  <UCalendar v-model="modelValue">
+    <template #day="{ day }">
+      <UChip :color="getColorByDate(day.toDate(''))">
+        {{ day.day }}
+      </UChip>
+    </template>
+  </UCalendar>
 </template>
diff --git a/docs/app/components/content/examples/calendar/CalendarMinMaxDatesExample.vue b/docs/app/components/content/examples/calendar/CalendarMinMaxDatesExample.vue
index 3d9989c772..ff985e0a7f 100644
--- a/docs/app/components/content/examples/calendar/CalendarMinMaxDatesExample.vue
+++ b/docs/app/components/content/examples/calendar/CalendarMinMaxDatesExample.vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
+const minDate = ref(new Date('2023-09-01'))
+const maxDate = ref(new Date('2023-09-30'))
+const modelValue = ref({
+  start: new Date('2023-09-01'),
+  end: new Date('2023-09-07')
+})
 </script>
 
 <template>
-  <div>TODO</div>
+  <UCalendar v-model="modelValue" :min-value="minDate" :max-value="maxDate" range />
 </template>
diff --git a/docs/app/components/content/examples/calendar/CalendarUnavailableDatesExample.vue b/docs/app/components/content/examples/calendar/CalendarUnavailableDatesExample.vue
index 3d9989c772..21a41bad95 100644
--- a/docs/app/components/content/examples/calendar/CalendarUnavailableDatesExample.vue
+++ b/docs/app/components/content/examples/calendar/CalendarUnavailableDatesExample.vue
@@ -1,6 +1,16 @@
 <script setup lang="ts">
+import type { Matcher } from '#ui/components/Calendar.vue'
+
+const modelValue = ref({
+  start: new Date('2023-09-08'),
+  end: new Date('2023-09-09')
+})
+
+const isDateUnavailable: Matcher = (date) => {
+  return date.day >= 10 && date.day <= 16
+}
 </script>
 
 <template>
-  <div>TODO</div>
+  <UCalendar v-model="modelValue" :is-date-unavailable="isDateUnavailable" range />
 </template>
diff --git a/docs/content/3.components/calendar.md b/docs/content/3.components/calendar.md
index 70ba84cc9b..d2d786abbe 100644
--- a/docs/content/3.components/calendar.md
+++ b/docs/content/3.components/calendar.md
@@ -1,4 +1,5 @@
 ---
+title: Calendar
 description: A calendar to select a date.
 links: 
   - label: Calendar
@@ -7,6 +8,7 @@ links:
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/Calendar.vue
+navigation.badge: New
 ---
 
 ## Usage
@@ -15,12 +17,6 @@ Use the `v-model` directive to control the selected date.
 
 ::component-code
 ---
-ignore:
-  - modelValue
-external:
-  - modelValue
-props:
-  modelValue: new Date('2025-01-01')
 ---
 ::
 
@@ -32,15 +28,8 @@ Use the `range` prop to select a range of dates.
 ---
 ignore:
   - range
-  - modelValue.start
-  - modelValue.end
-external:
-  - modelValue
 props:
   range: true
-  modelValue:
-    start: new Date('2025-01-01')
-    end: new Date('2025-01-02')
 ---
 ::
 
@@ -92,6 +81,8 @@ props:
 
 ### Events Calendar
 
+Add a different color to each day.
+
 ::component-example
 ---
 name: 'calendar-events-example'
@@ -100,6 +91,8 @@ name: 'calendar-events-example'
 
 ### Disabled Dates
 
+Mark the interval between `10` and `16` as disabled
+
 ::component-example
 ---
 name: 'calendar-disabled-dates-example'
@@ -108,6 +101,8 @@ name: 'calendar-disabled-dates-example'
 
 ### Unavailable Dates
 
+Mark the interval between `10` and `16` as unavailable
+
 ::component-example
 ---
 name: 'calendar-unavailable-dates-example'
@@ -116,6 +111,8 @@ name: 'calendar-unavailable-dates-example'
 
 ### Min/Max Dates
 
+Limit the dates between `2023-09-01` and `2023-09-30`
+
 ::component-example
 ---
 name: 'calendar-min-max-dates-example'
diff --git a/playground/app/pages/components/calendar.vue b/playground/app/pages/components/calendar.vue
index e575519631..a026bffd60 100644
--- a/playground/app/pages/components/calendar.vue
+++ b/playground/app/pages/components/calendar.vue
@@ -11,14 +11,8 @@ const multipleValue = ref({
     <div class="flex justify-center gap-2">
       <UCalendar v-model="singleValue" />
     </div>
-    <div class="flex justify-center gap-2">
-      <UCalendar v-model="singleValue" :range="false" />
-    </div>
     <div class="flex justify-center gap-2">
       <UCalendar v-model="multipleValue" range />
     </div>
-    <div class="flex justify-center gap-2">
-      <UCalendar v-model="multipleValue" :range="true" />
-    </div>
   </div>
 </template>
diff --git a/src/runtime/components/Calendar.vue b/src/runtime/components/Calendar.vue
index 7bf02e84df..d952f853d7 100644
--- a/src/runtime/components/Calendar.vue
+++ b/src/runtime/components/Calendar.vue
@@ -7,6 +7,8 @@ import _appConfig from '#build/app.config'
 import theme from '#build/ui/calendar'
 import type { DateRange, DateRangeRadix } from '../types/date'
 
+export type { Matcher } from 'radix-vue/date'
+
 const appConfig = _appConfig as AppConfig & { ui: { calendar: Partial<typeof theme> } }
 
 const calendar = tv({ extend: tv(theme), ...(appConfig.ui?.calendar || {}) })
diff --git a/test/components/Calendar.spec.ts b/test/components/Calendar.spec.ts
index 8d46d42bf4..b4a9d01887 100644
--- a/test/components/Calendar.spec.ts
+++ b/test/components/Calendar.spec.ts
@@ -16,8 +16,8 @@ describe('Calendar', () => {
 
   it.each([
     // Props
-    ['with class', { props: { class: '' } }],
-    ['with ui', { props: { ui: {} } }],
+    ['with class', { props: { class: 'custom-class' } }],
+    ['with ui', { props: { ui: { root: 'w-96' } } }],
     ['with range', { props: { range: true } }],
     ['with disabled', { props: { range: true } }],
     ['with readonly', { props: { range: true } }],
diff --git a/test/components/__snapshots__/Calendar-vue.spec.ts.snap b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
index 9be019d9bd..ab8e457040 100644
--- a/test/components/__snapshots__/Calendar-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar-vue.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Calendar > renders with class correctly 1`] = `
-"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)] custom-class">
   <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -2646,7 +2646,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
 `;
 
 exports[`Calendar > renders with ui correctly 1`] = `
-"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)] w-96">
   <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
       <!--v-if-->
       <!--v-if-->
diff --git a/test/components/__snapshots__/Calendar.spec.ts.snap b/test/components/__snapshots__/Calendar.spec.ts.snap
index eb546b763d..92b01d3984 100644
--- a/test/components/__snapshots__/Calendar.spec.ts.snap
+++ b/test/components/__snapshots__/Calendar.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Calendar > renders with class correctly 1`] = `
-"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)] custom-class">
   <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -2646,7 +2646,7 @@ exports[`Calendar > renders with size xs correctly 1`] = `
 `;
 
 exports[`Calendar > renders with ui correctly 1`] = `
-"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)]">
+"<div role="application" aria-label="Event Date, January 2025" dir="ltr" class="rounded-[calc(var(--ui-radius)*1.5)] w-96">
   <div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text)] hover:bg-[var(--ui-bg-elevated)] focus-visible:bg-[var(--ui-bg-elevated)] hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->